Cannot destructure property 'open' of 'getContext(...)' as it is undefined

[f4ww4z]

I am using sapper and I've installed this library using npm i -D svelte-simple-modal. I'm following the tutorial in README.md but I'm stuck at this part of the code:

const { open } = getContext("simple-modal");

It's throwing an Internal Server Error (500):

Cannot destructure property 'open' of 'getContext(...)' as it is undefined.

TypeError: Cannot destructure property 'open' of 'getContext(...)' as it is undefined.
    at D:\GitHub\pejabatku-frontend\src\routes\documents\[id].svelte:47:14
    at Object.$$render (D:\GitHub\pejabatku-frontend\node_modules\svelte\internal\index.mjs:1341:23)
    at Object.default (D:\GitHub\pejabatku-frontend\src\node_modules\@sapper\internal\App.svelte:24:50)
    at D:\GitHub\pejabatku-frontend\__sapper__\dev\server\server-c9687f2a.js:761:34
    at Object.$$render (D:\GitHub\pejabatku-frontend\node_modules\svelte\internal\index.mjs:1341:23)
    at D:\GitHub\pejabatku-frontend\src\node_modules\@sapper\internal\App.svelte:20:18
    at $$render (D:\GitHub\pejabatku-frontend\node_modules\svelte\internal\index.mjs:1341:23)
    at Object.render (D:\GitHub\pejabatku-frontend\node_modules\svelte\internal\index.mjs:1349:33)
    at D:\GitHub\pejabatku-frontend\src\node_modules\@sapper\server.mjs:4687:54
    at Generator.next (<anonymous>)

where pejabatku-frontend is my project name.

Sapper version: 0.28.0
Svelte version: 3.29.4

Can I get a pointer on how to fix it?

[flekschas]

Sorry to hear that! It's hard to give any concrete advice without more context (i.e., your specific setup) but my guess is that you're calling getContext("simple-modal") from a component that's not a child of <Modal />

[Volubyl]

@flekschas in my case your guess was right. I had the same issue because I was trying to use getContext in the same file where was also imported <Modal>

As the Readme example mentioned the way I solved the problem was to create three files like so

<--- Dummy.svelte -->

<h1> Dummy Component </h1>

<--- Inner.svelte -->

<script>
  import { getContext } from 'svelte';
  import Dummy from './Dummy.svelte';

  const { open } = getContext('simple-modal');

  const openModal = () => {
    open(Dummy);
  };
</script>

<h1> Hello world </h1>
<button on:click={openModal}> </button>

<--- Outer.svelte -->

<script>
  import Modal from 'svelte-simple-modal';
  import Inner from '../Inner.svelte';
</script>

<Modal>
          <Inner />
</Modal>

[flekschas]

I assume we can close this issue. If it's still not working, please reopen with more details.