Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

Open
fivaz opened this issue Nov 15, 2024 · 4 comments
Open

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

fivaz opened this issue Nov 15, 2024 · 4 comments
Assignees
@jakobrosenberg
Labels
bug Something isn't working needs triage

Comments

@fivaz
Copy link

fivaz commented Nov 15, 2024

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
@fivaz fivaz added bug Something isn't working needs triage labels Nov 15, 2024
@jakobrosenberg jakobrosenberg self-assigned this Nov 27, 2024
@jakobrosenberg
Copy link
Member

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
Copy link

Kopatch commented Mar 5, 2025

@jakobrosenberg any update on this?

@jakobrosenberg
Copy link
Member

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

@Kopatch
Copy link

Kopatch commented Mar 6, 2025 •
edited
Loading

@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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jakobrosenberg jakobrosenberg

Labels
bug Something isn't working needs triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jakobrosenberg @Kopatch @fivaz