-
-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Svelte component bundled with outros throws at runtime #3964
Comments
A buggy version of npm is doing funky things and installing duplicate versions of Svelte all over the place. It had nothing to do with the Svelte version. Stacktrace
Breaking codefunction transition_out(block, local, detach, callback) {
if (block && block.o) {
if (outroing.has(block))
return;
outroing.add(block);
outros.c.push(() => { // <---- outros is undefined
outroing.delete(block);
if (callback) {
if (detach)
block.d(1);
callback();
}
});
block.o(local);
}
}
Well, it seems this pattern of including another component within the same package does bring out the bug, but it was still only caused by buggy Nuking |
Just hit this problem after moving our shared components out into its own modules. During development we're using npm link but webpack is getting two copies of svelte. Found this writeup The TLDR; is, if you're using webpack and npm linking your components in, get them to resolve to the same version of svelte by adding this to your webpack config. This worked for me. const path = require("path");
{
// usual webpack config +
resolve: {
alias:{
"svelte":path.resolve(__dirname, "node_modules/svelte"),
}
}
} In production we would just npm install the modules so they resolve svelte from the host project. The above change shouldn't break anything in the host project as that's where it'd look for svelte anyway. |
I came across this issue, and I have been looking after it. I don't get the reason for the error yet. I have checked all the possibilities pointed here and none of them helped.
I have wrote a lib @daniloster/svelte-i18n which is getting this error when is being consumed inside an if block.
When May I have some help with it, please? |
I have checked the thread comment #3448 (comment) And I have changed the library to publish only babel transpilation + svelte file. This way, compilation will happen in the end-app. Thanks everyone. |
I've made a tiny component to use into project. (https://github.com/lagden/svelte-btn) In my case, the error only happens if I use a svelte component as child. REPL fragment code <script>
import Btn from '@tadashi/svelte-btn/dist/index.mjs'
//... code stuff
</script>
<Btn class="{cssTheme} {className}" {...filtered} on:click>
{#if icoName}
<Icon name="ico_{icoName}" class="{_icon} {value ? _icon_margin : ''}" />
{/if}
</Btn> If you replace by pure HTML, the component will work! <Btn class="{cssTheme} {className}" {...filtered} on:click>
{#if icoName}
<svg class="{_icon} {value ? _icon_margin : ''}">
<use xlink:href="#residencial_ico_{icoName}" />
</svg>
{/if}
</Btn> I think it's a bug, because the component and your children are render. Obs.: If use https://github.com/lagden/svelte-btn/blob/master/package.json#L24-L25 |
I can also confirm that this issues happens, in my case is by using Possible duplicated from #3448 |
The Make a simple test, replace the content of {#if}
<p>test</p>
{/if} |
Is there anything going on here that's different from the many other issues that have been opened about problems that happen when there are two copies of the Svelte internals bundled into an app? This sounds to me like just another occurrence of that. You need to make sure the published component has a |
Just a late night idea: would be sweet, if Svelte had (at least in dev mode) a mechanism to detect multiple instances of Svelte's internals. That would: a) Reduce the amount of weird and non-existent bugs due to having two runtimes present |
As usual in these types of cases, forcing the version via "resolutions": {
"svelte": "^3.32.1"
} |
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. |
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. |
Closing in favour of #2864 |
Describe the bug
When bundling a Svelte component into a module, then loading it dynamically, the
outros
function is missing and this causes a runtime error when the component is scheduled to unload.To Reproduce
I created a live demo here:
https://practical-bartik-9883e1.netlify.com
The source is here:
https://github.com/caqu/import-svelte/tree/master/src
https://github.com/caqu/import-svelte/blob/master/rollup.config.js
The issue I see is rooted here on the generated code:
https://practical-bartik-9883e1.netlify.com/build/child_with_fade.js
Logs
Expected behavior
I'm relatively new to Svelte and Rollup, so it's possible there's a config error in my Rollup file.
Severity
This seems to be an issue that's impacting many developers using dynamic imports and routing. I believe it may also be the root cause of:
#3448
#3165
Additional Context
The issue seems to appear when adding a
< slot / >
to the child component.The text was updated successfully, but these errors were encountered: