Skip to content

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

Closed
@jjones315

Description

@jjones315

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

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions