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

Svelte 5: Children snippet with argument is required to be explicitly defined now #12414

Closed
jjones315 opened this issue Jul 11, 2024 · 3 comments · Fixed by #12421
Closed

Svelte 5: Children snippet with argument is required to be explicitly defined now #12414

jjones315 opened this issue Jul 11, 2024 · 3 comments · Fixed by #12421
Assignees
@dummdidumm
Labels
bug
Milestone
5.0

Comments

@jjones315
Copy link

jjones315 commented Jul 11, 2024 •
edited
Loading

Describe the bug

After upgrading from next.162 to next.182 children snippets are required to be explicitly defined if they receive an argument, even if the argument is not needed. I have a component set built upon bits-ui and use the asChild/builder pattern for some components. in 162 it worked fine, the 15% of components that need to use the builder can use the explicit syntax, while the other 85% were able to be used as implicit children. now that results in a render_tag_invalid_argument error.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACp2STU_CQBCG_8q4mlBiS_WKBTUSEy540MSD9dBsB9jYzm52B9Q0_e9mKR8FJSEe5_uZmbcSU1WgE_23SlBWouiLe2NEKPjbeMMtsWAUoXB6YaX3JE5aZXiYUsqqNNoyvCqeP5MyBhmmVpeQil7ccvaaLqm48UUFMki9IIYBXDjOGIOrro9QytMFSVaaQJG0WCJx0IXKR1Juai4HcL1qU6eUxDsWSs6iCD61_VA0gwjwyxRKKg7BokS19N7MziCKhiklLbjVItW5W_PLuSpyixT4RdYp3bohGMMEMcccqlZwFatit7WS-KD7cTTS_F-8HdNIE6_AYJRxdiLN5OmlRaRKT8RHpv81ZL-tCEWpczVVmIs-2wXW4VZOrbzTZAUgNblGSRtVDaDj58KjV9eYCC086NJoQmIINm_qbPVVbe5Ue5EZq40LvMb2FZOrZXPeO4uUo91e97Z3-P4kbpJ_b_pe_wC9giVqRAMAAA==

Logs

Uncaught (in promise) Svelte error: render_tag_invalid_argument
The argument to `{@render ...}` must be a snippet function, not a component or a slot with a `let:` directive or some other kind of function. If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}`
    at render_tag_invalid_argument (http://localhost:5173/node_modules/.vite/deps/chunk-2ERIDG5A.js?v=3e81fe30:883:19)
    at Module.validate_snippet (http://localhost:5173/node_modules/.vite/deps/chunk-2ERIDG5A.js?v=3e81fe30:2202:5)
    at http://localhost:5173/src/lib/ui/components/inputs/dropdown/DropdownTrigger.svelte?t=1720729739250:51:31
    at http://localhost:5173/node_modules/.vite/deps/chunk-ANVUOQCZ.js?v=3e81fe30:1638:34
    at update_reaction (http://localhost:5173/node_modules/.vite/deps/chunk-2ERIDG5A.js?v=3e81fe30:1071:23)
    at update_effect (http://localhost:5173/node_modules/.vite/deps/chunk-2ERIDG5A.js?v=3e81fe30:1189:21)
    at create_effect (http://localhost:5173/node_modules/.vite/deps/chunk-2ERIDG5A.js?v=3e81fe30:1728:7)
    at block (http://localhost:5173/node_modules/.vite/deps/chunk-2ERIDG5A.js?v=3e81fe30:1847:10)
    at Module.snippet (http://localhost:5173/node_modules/.vite/deps/chunk-ANVUOQCZ.js?v=3e81fe30:1637:3)
    at http://localhost:5173/src/lib/ui/components/inputs/dropdown/DropdownTrigger.svelte?t=1720729739250:51:7Svelte error: render_tag_invalid_argument
The argument to `{@render ...}` must be a snippet function, not a component or a slot with a `let:` directive or some other kind of function. If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}`
    at render_tag_invalid_argument (http://localhost:5173/node_modules/.vite/deps/chunk-2ERIDG5A.js?v=3e81fe30:883:19)
    at Module.validate_snippet (http://localhost:5173/node_modules/.vite/deps/chunk-2ERIDG5A.js?v=3e81fe30:2202:5)
    at http://localhost:5173/src/lib/ui/components/inputs/dropdown/DropdownTrigger.svelte?t=1720729739250:51:31
    at http://localhost:5173/node_modules/.vite/deps/chunk-ANVUOQCZ.js?v=3e81fe30:1638:34
    at update_reaction (http://localhost:5173/node_modules/.vite/deps/chunk-2ERIDG5A.js?v=3e81fe30:1071:23)
    at update_effect (http://localhost:5173/node_modules/.vite/deps/chunk-2ERIDG5A.js?v=3e81fe30:1189:21)
    at create_effect (http://localhost:5173/node_modules/.vite/deps/chunk-2ERIDG5A.js?v=3e81fe30:1728:7)
    at block (http://localhost:5173/node_modules/.vite/deps/chunk-2ERIDG5A.js?v=3e81fe30:1847:10)
    at Module.snippet (http://localhost:5173/node_modules/.vite/deps/chunk-ANVUOQCZ.js?v=3e81fe30:1637:3)
    at http://localhost:5173/src/lib/ui/components/inputs/dropdown/DropdownTrigger.svelte?t=1720729739250:51:7

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900
    Memory: 5.01 GB / 31.70 GB
  Binaries:
    Node: 21.6.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Local\pnpm\pnpm.EXE
    bun: 1.1.15 - ~\AppData\Roaming\npm\bun.CMD
  Browsers:
    Edge: Chromium (126.0.2592.87)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: 5.0.0-next.182 => 5.0.0-next.182

Severity

blocking an upgrade
@dummdidumm dummdidumm added this to the 5.0 milestone Jul 11, 2024
@dummdidumm dummdidumm added the bug label Jul 11, 2024
@paoloricciuti
Copy link
Member

This #12400 is the culprit...will try to fix later.

@memestageceo
Copy link

I'm getting the same error here, even though it's not a Children snippet but instead a snippet defined in the same file.:
image

@dummdidumm dummdidumm self-assigned this Jul 12, 2024
dummdidumm added a commit that referenced this issue Jul 12, 2024
@dummdidumm
fix: properly validate snippet/slot interop
01683b4 
The previous validation for checking if slots with let directives were rendered with `{@render children(...)}` had false positives
- threw an error even if the other side didn't make use of the arguments, i.e. wasn't actually using a let directive
- didn't check that the rendered snippet actually was the children property

This fixes the validation by only applying it to children render tags, and by adding the slot to `$$slots.default` instead of `$$props.children` in more cases (when it's using `<svelte:fragment>` or `let:` directives, which both mean you're using old slot syntax)

Fixes #12414
@dummdidumm dummdidumm mentioned this issue Jul 12, 2024
Merged
5 tasks
@huntabyte huntabyte mentioned this issue Jul 12, 2024
Closed
Rich-Harris pushed a commit that referenced this issue Jul 12, 2024
@dummdidumm
fix: properly validate snippet/slot interop (#12421)
51f12d2 
The previous validation for checking if slots with let directives were rendered with `{@render children(...)}` had false positives
- threw an error even if the other side didn't make use of the arguments, i.e. wasn't actually using a let directive
- didn't check that the rendered snippet actually was the children property

This fixes the validation by only applying it to children render tags, and by adding the slot to `$$slots.default` instead of `$$props.children` in more cases (when it's using `<svelte:fragment>` or `let:` directives, which both mean you're using old slot syntax)

Fixes #12414
@memestageceo
Copy link

wow, you guys are fast. Thanks.

trueadm pushed a commit that referenced this issue Jul 16, 2024
@dummdidumm @trueadm
fix: properly validate snippet/slot interop (#12421)
6181861 
The previous validation for checking if slots with let directives were rendered with `{@render children(...)}` had false positives
- threw an error even if the other side didn't make use of the arguments, i.e. wasn't actually using a let directive
- didn't check that the rendered snippet actually was the children property

This fixes the validation by only applying it to children render tags, and by adding the slot to `$$slots.default` instead of `$$props.children` in more cases (when it's using `<svelte:fragment>` or `let:` directives, which both mean you're using old slot syntax)

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

@dummdidumm dummdidumm

Labels
bug
Projects
None yet
Milestone
5.0
Development

Successfully merging a pull request may close this issue.

fix: properly validate snippet/slot interop sveltejs/svelte
4 participants
@dummdidumm @paoloricciuti @memestageceo @jjones315