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.

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

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

Closed
mmailaender opened this issue Mar 13, 2024 · 3 comments · Fixed by #10800
Closed

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

mmailaender opened this issue Mar 13, 2024 · 3 comments · Fixed by #10800
Assignees
Milestone

Comments

@mmailaender
Copy link

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

  1. Checkout: https://github.com/mmailaender/svelte5
  2. run pnpm i
  3. run pnpm dev
  4. open app
  5. 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
Copy link
Contributor

rmunn commented Mar 13, 2024

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

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

@dummdidumm
Copy link
Member

See skeletonlabs/skeleton#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.

@dummdidumm dummdidumm added this to the 5.0 milestone Mar 13, 2024
@dummdidumm dummdidumm self-assigned this Mar 13, 2024
Rich-Harris added a commit that referenced this issue May 15, 2024
* feat: provide isSnippet type, deduplicate children prop from default slot

fixes #10790
part of #9774

* fix ce bug

* remove isSnippet type, adjust test

* fix types

* revert unrelated changes

* remove changeset

* enhance test

* fix

* fix

* fix

* fix, different approach without needing symbol

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants