onMount not called with dynamic import

[jindrahm]

Describe the bug

1. I have a main component dynamically imported and a child component imported statically
2. The child component is rendered in the main component's slot after a DOM change (e.g. loading)
3. The child component's onMount is not called at the beginning but right before onDestroy (BUG)

If the parent component is imported statically or the loading is omitted (the slot content doesn't change), it's OK.

All three case are demonstrated in the app in the repo bellow.

To Reproduce
https://github.com/jindrahm/svelte-component-dynamic-import

Expected behavior
onMount should be called right after the component is mounted regardless the way it's imported or whether it's render later or not.

Information about your Svelte project:

• Your browser and the version: Chrome 86
• Your operating system: Mac 10.15.7
• Svelte version: 3.29.0
• Using Rollup

Severity
I would say 2 out of 3. It's no blocker but it increases my project size because I cannot share the components using dynamic imports. I have to bundle them in every module to work this bug around.

[j3rem1e]

This is related to the rollup configuration.

In the repo, the rollup configuration create two entries, and svelte is bundled twice. The dynamic-import import the secondary entry and not the composant.

When updating rollup.config.js to use the "official svelte-template" configuration, and using a relative dynamic import (import('./MainCompo.svelte')), it works as expected.

[jindrahm]

Hi j3rem1e, thank you for having a look. Do you mean to update the rollup config to have just one bundle? That's not wanted because I have a set of components in one bundle shared via CDN among standalone apps.

[j3rem1e]

You can't bundle multiple svelte runtimes.

[jindrahm]

Why? I expected it's more about the component API which is exported by the component bundle than about the way it's imported or bundled in an app.
Also I've been running on this solution for several months without some serious problems.. just this one and this one #3448. So it seems to me solvable that it could work.

[j3rem1e]

A svelte runtimes has global states like render-callbacks, dirty components, and lifecycle loop (flush) for example.

Multiple runtimes can't share this states and you see this kind of bugs.

I own myself severals applications which use like you "independants" compiled bundle. However svelte should be configured as a singleton in order to work. I don't know how to do that with rollup but with webpack there is a concept of "external" dependency which allow to share a runtime between entry points.

[jindrahm]

OK, thanks for explanation. I actually use the external dependencies with rollup but not sure if I can share a runtime.. gonna look deeper.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dummdidumm]

Closing since this is a bundler issue and the question seems to be answered

[jindrahm]

Finally have a solution.. building svelte/internal as a separate module and treating svelte and svelte/internal dependencies as external and pointing them to the module.
That makes the internal svelte logic to be shared for all the components.
I updated the repo so you can have a look.