Svelte 5: TypeError: children.forEach is not a function

mmailaender commented 6 months ago

Describe the bug

Running with Svelte 5 creates the following critical error (But with Svelte 4 everything works fine)

TypeError: children.forEach is not a function
    at TreeViewItem (/workspace/svelte5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.0_svelte@5.0.0-next.77/node_modules/@skeletonlabs/skeleton/dist/components/TreeView/TreeViewItem.svelte:170:12)
    at eval (/workspace/svelte5/src/routes/+page.svelte:83:80)
    at Module.slot (/workspace/svelte5/node_modules/.pnpm/svelte@5.0.0-next.77/node_modules/svelte/src/internal/server/index.js:550:3)
    at TreeView (/workspace/svelte5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.0_svelte@5.0.0-next.77/node_modules/@skeletonlabs/skeleton/dist/components/TreeView/TreeView.svelte:82:24)
    at _page (/workspace/svelte5/src/routes/+page.svelte:76:74)
    at /workspace/svelte5/.svelte-kit/generated/root.svelte:45:41
    at Module.slot (/workspace/svelte5/node_modules/.pnpm/svelte@5.0.0-next.77/node_modules/svelte/src/internal/server/index.js:550:3)
    at eval (/workspace/svelte5/src/routes/+layout.svelte:58:26)
    at Module.slot (/workspace/svelte5/node_modules/.pnpm/svelte@5.0.0-next.77/node_modules/svelte/src/internal/server/index.js:550:3)
    at AppShell (/workspace/svelte5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.0_svelte@5.0.0-next.77/node_modules/@skeletonlabs/skeleton/dist/components/AppShell/AppShell.svelte:119:24)

Reproduction

Checkout: https://github.com/mmailaender/svelte5
run pnpm i
run pnpm dev
open app
see the error

Alternatively open the following GitPod link: https://gitpod.io/?autostart=true#https://github.com/mmailaender/svelte5

Logs

No response

System Info

System:
    OS: Linux 6.1 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7B13
    Memory: 37.41 GB / 62.79 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.11.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 8.15.4 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
  npmPackages:
    svelte: 5.0.0-next.77 => 5.0.0-next.77

Severity

blocking an upgrade

rmunn commented 6 months ago

If you rename the children slot to any other name, does the error go away? If so, it's probably related to https://svelte-5-preview.vercel.app/docs/breaking-changes#the-children-prop-is-reserved which reserves the children name for props. If that's the cause, the compiler may need a warning for slots named children as well, which may not have happened yet because slots are deprecated in Svelte 5 and so they haven't received as much development attention up till now.

mmailaender commented 6 months ago

Unfortunatly, I can't test it, because the error is coming from a library called skeleton

dummdidumm commented 6 months ago

See https://github.com/skeletonlabs/skeleton/issues/2502 - they have a property called children which is reserved in Svelte 5. We should see if we can come up with a way to not break when someone uses a children prop but uses slots.

sveltejs / svelte