Using nested components

[davemccrea]

I'm encountering a TypeError: outros is undefined when using a nested component.

App.svelte

...
<Modal>
    <Delivery />
<Modal />

Delivery.svelte

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

function showCardPickerModal() {
    open(CardPicker);
}

CardPicker.svelte

<script>
import Card from './Card.svelte
<script />

<Card />

Card.svelte

<h1>Some text</h1>

The modal opens, however when using the close button or clicking the background the error appears in the browser console window. All works as expected when I don't use a nested component within the CardPicker component. Is this a limitation of Svelte or svelte-simple-modal?

Using latest Svelte and svelte-simple-modal version.

[davemccrea]

Turns out I hadn't configured Webpack properly as is written on the README. Working as expected now!

[flekschas]

Glad to hear it's working 🎉

[udiudi]

Hi,
sorry for hijacking this issue, but the same error with the same scenario happens to me as well, and as far as I know Webpack is configured properly (see output here).

I'm using Rails with Webpacker and Svelte. Any ideas or suggestions what may be the problem? perhaps the bundle isn't configured correctly?

Thanks

[flekschas]

Can you provide some details? At the very least, please provide the trace of the error message. My guess is that this is a webpack config issue.

[udiudi]

of course, sorry!
It happens similarly to what was described at the first post, the same error when trying to close a nested component.

Trace and the line with the error can be found here

[flekschas]

Thanks for the detailed trace.

Given that the function you're highlighting is not coming from svelte-simple-modal and that multiple people have the same issue with Svelte, I'm certain that this is a webpack-related bundling issue:

• Svelte component bundled with outros throws at runtime sveltejs/svelte#3964
• Outros undefined when transitioning to another page sveltejs/svelte#3165
• outros undefined when including svelte libraries wewowweb/laravel-mix-svelte#5 (comment)

Unfortunately, there isn't anything I can do on my end.

[udiudi]

@flekschas thank you! I'll keep looking.

[psyCodelist]

@davemccrea can you please let me know how you configured WebPack for your issue? I'm having the same issue and no luck so far.

Many thanks...

[udiudi]

@psyCodelist this helped me resolve my issue: wewowweb/laravel-mix-svelte#5 (comment)