can't use {@render children()} instead of <slot/> from Svelte 5 in _modules

[fivaz]

Describe the bug

The Support of Svelte 5 is almost 100% the only problem is when I try to use {@render children()} instead of in _module.svelte files I get the following error:

Uncaught Svelte error: invalid_default_snippet
Cannot use {@render children(...)} if the parent component uses let: directives. Consider using a named snippet instead

Reproduction

here is a minimal reproductive example: https://github.com/fivaz/routify-svelte5

I created this repo using the npm init routify@latest and selecting "starter-basic-svelte-5"

Logs

chunk-7AJI2GL6.js?v=839c9c4e:1520 Uncaught Svelte error: invalid_default_snippet
Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead

	in Dashboard.svelte
	in _module.svelte
	in AnchorDecorator.svelte
	in ScrollDecorator.svelte
	in DecoratorWrapper.svelte
	in RenderFragment.svelte
	in ComposeFragments.svelte
	in _module.svelte
	in AnchorDecorator.svelte
	in ScrollDecorator.svelte
	in DecoratorWrapper.svelte
	in RenderFragment.svelte
	in ComposeFragments.svelte
	in AnchorDecorator.svelte
	in Router.svelte
	in App.svelte

    at invalid_default_snippet (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1520:19)
    at http://localhost:5173/node_modules/.vite/deps/chunk-4ITRTXZZ.js?v=839c9c4e:1109:7
    at update_reaction (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1721:23)
    at update_effect (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1812:21)
    at create_effect (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1191:7)
    at branch (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1323:10)
    at http://localhost:5173/node_modules/.vite/deps/chunk-4ITRTXZZ.js?v=839c9c4e:1107:22
    at update_reaction (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1721:23)
    at update_effect (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1812:21)
    at create_effect (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1191:7)Svelte error: invalid_default_snippet
Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
    at invalid_default_snippet (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1520:19)
    at http://localhost:5173/node_modules/.vite/deps/chunk-4ITRTXZZ.js?v=839c9c4e:1109:7
    at update_reaction (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1721:23)
    at update_effect (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1812:21)
    at create_effect (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1191:7)
    at branch (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1323:10)
    at http://localhost:5173/node_modules/.vite/deps/chunk-4ITRTXZZ.js?v=839c9c4e:1107:22
    at update_reaction (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1721:23)
    at update_effect (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1812:21)
    at create_effect (http://localhost:5173/node_modules/.vite/deps/chunk-7AJI2GL6.js?v=839c9c4e:1191:7)
invalid_default_snippet @ chunk-7AJI2GL6.js?v=839c9c4e:1520
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1109
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1107
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
snippet @ chunk-4ITRTXZZ.js?v=839c9c4e:1098
(anonymous) @ _module.svelte:18
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1121
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1109
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1107
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
snippet @ chunk-4ITRTXZZ.js?v=839c9c4e:1098
Dashboard @ Dashboard.svelte:23
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:230
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:224
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
wrapper @ chunk-4ITRTXZZ.js?v=839c9c4e:217
_module @ _module.svelte:18
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:230
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:224
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
wrapper @ chunk-4ITRTXZZ.js?v=839c9c4e:217
(anonymous) @ @roxi_routify.js?v=839c9c4e:3107
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1169
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1169
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
component @ chunk-4ITRTXZZ.js?v=839c9c4e:1162
(anonymous) @ @roxi_routify.js?v=839c9c4e:3106
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1121
slot @ chunk-4ITRTXZZ.js?v=839c9c4e:1081
(anonymous) @ @roxi_routify.js?v=839c9c4e:2995
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:548
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:548
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
if_block @ chunk-4ITRTXZZ.js?v=839c9c4e:518
(anonymous) @ @roxi_routify.js?v=839c9c4e:2964
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:548
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:548
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
if_block @ chunk-4ITRTXZZ.js?v=839c9c4e:518
AnchorDecorator @ @roxi_routify.js?v=839c9c4e:2945
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:230
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:224
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
wrapper @ chunk-4ITRTXZZ.js?v=839c9c4e:217
(anonymous) @ @roxi_routify.js?v=839c9c4e:3098
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:578
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:578
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
key_block @ chunk-4ITRTXZZ.js?v=839c9c4e:573
(anonymous) @ @roxi_routify.js?v=839c9c4e:3095
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:443
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
update2 @ chunk-4ITRTXZZ.js?v=839c9c4e:443
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:499
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
await_block @ chunk-4ITRTXZZ.js?v=839c9c4e:468
(anonymous) @ @roxi_routify.js?v=839c9c4e:3092
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1121
slot @ chunk-4ITRTXZZ.js?v=839c9c4e:1081
(anonymous) @ @roxi_routify.js?v=839c9c4e:2529
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:548
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:548
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
if_block @ chunk-4ITRTXZZ.js?v=839c9c4e:518
(anonymous) @ @roxi_routify.js?v=839c9c4e:2502
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1121
slot @ chunk-4ITRTXZZ.js?v=839c9c4e:1081
ScrollDecorator @ @roxi_routify.js?v=839c9c4e:2093
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:230
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:224
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
wrapper @ chunk-4ITRTXZZ.js?v=839c9c4e:217
(anonymous) @ @roxi_routify.js?v=839c9c4e:2485
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1169
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1169
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
component @ chunk-4ITRTXZZ.js?v=839c9c4e:1162
DecoratorWrapper @ @roxi_routify.js?v=839c9c4e:2484
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:230
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:224
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
wrapper @ chunk-4ITRTXZZ.js?v=839c9c4e:217
(anonymous) @ @roxi_routify.js?v=839c9c4e:3085
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1169
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:1169
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
block @ chunk-7AJI2GL6.js?v=839c9c4e:1320
component @ chunk-4ITRTXZZ.js?v=839c9c4e:1162
RenderFragment @ @roxi_routify.js?v=839c9c4e:3084
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:230
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
create_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1191
branch @ chunk-7AJI2GL6.js?v=839c9c4e:1323
(anonymous) @ chunk-4ITRTXZZ.js?v=839c9c4e:224
update_reaction @ chunk-7AJI2GL6.js?v=839c9c4e:1721
update_effect @ chunk-7AJI2GL6.js?v=839c9c4e:1812
Show 197 more frames
Show less
api.js:1 
        
        
       
        
       Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
api.js:1 
        
        
       
        
       Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
api.js:1 
        
        
       
        
       Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
api.js:1 
        
        
       
        
       Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M2
    Memory: 98.98 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 3.4.1 - ~/.nvm/versions/node/v20.11.0/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 9.1.1 - ~/Library/pnpm/pnpm
  npmPackages:
    @roxi/routify: ^3.0.0-next.240 => 3.0.0-next.241 
    svelte: ^5.0.0 => 5.2.0 
    vite: ^5.2.0 => 5.4.11

[jakobrosenberg]

Thanks for reporting this and sorry about the slow follow up.

If I can fix this issue without breaking compatibility with Svelte 4, I'll let you know.

[Kopatch]

@jakobrosenberg any update on this?

[jakobrosenberg]

@Kopatch not currently. What is the use-case you're trying to solve?

[Kopatch]

@jakobrosenberg I am trying to replace <slot> with {@render children()} at _module.svelte of the root folder, I do it since svelte eslint warning me that is deprecated and I am trying to align all code to svelte 5 syntax

// _module.svelte
<script>
    let { children } = $props();
</script>

<div class="p-4 h-full overflow-auto relative">
    {@render children()}
</div>

[arthurspa]

I'm looking into whether to use Routify or not with a new SPA I'm creating. I use Svelte 5.

Any plans on fixing support for svelte 5 syntax render instead of the deprecated slot?

[jakobrosenberg]

@arthurspa

While Routify work with Svelte 5, using Svelte 5 inside Routify 3 would break all Svelte 4 apps.

For this reason Svelte 5 syntax in Routify would be reserved for Routify 4.