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

'Uncaught TypeError: Illegal Invocation' when root layout contains body tag #13224

Open
BaumianerNiklas opened this issue Dec 22, 2024 · 3 comments
Open

'Uncaught TypeError: Illegal Invocation' when root layout contains body tag #13224

BaumianerNiklas opened this issue Dec 22, 2024 · 3 comments
Labels
feature / enhancement New feature or request

Comments

@BaumianerNiklas
Copy link

Describe the bug

Recently I migrated an old app (Sveltekit 1/ Svelte 3) to Svelte 5 via the migration scripts. That worked great for the most part, but my app would no longer work correctly. It rendered the page initially but quickly repainted it completely blank. In the console it printed the error "Uncaught TypeError: Illegal Invocation" (see logs).
I found the fix/workaround in a Reddit Thread that had the same issue: a wrapping <body> tag inside the root layout +layout.svelte was causing the issue. Removing this wrapping body element fixed the issue.

The issue occurs both when using slots or snippets. It does not occur when you remove the slot/snippet from the layout.

In my original project it also gave me a hydration_mismatch warning before the Illegal Invocation error, though I wasn't able to reproduce that.

Reproduction

https://github.com/BaumianerNiklas/svelte5-illegal-invocation-repro

This is a barebones project created with the sv CLI, with the only change being the layout that was added.
If you remove the wrapping body tag in there, everything works fine.

Logs

chunk-TFYL3GQY.js?v=4e242971:2346 Uncaught TypeError: Illegal invocation

	in root.svelte

    at get_next_sibling (chunk-TFYL3GQY.js?v=4e242971:2346:30)
    at Module.sibling (chunk-TFYL3GQY.js?v=4e242971:2394:5)
    at _layout (+layout.svelte?t=1734871119624:16:15)
    at chunk-DIK5XZVB.js?v=4e242971:283:58
    at update_reaction (chunk-TFYL3GQY.js?v=4e242971:1308:23)
    at update_effect (chunk-TFYL3GQY.js?v=4e242971:1399:21)
    at create_effect (chunk-TFYL3GQY.js?v=4e242971:2474:7)
    at branch (chunk-TFYL3GQY.js?v=4e242971:2622:10)
    at chunk-DIK5XZVB.js?v=4e242971:277:17
    at update_reaction (chunk-TFYL3GQY.js?v=4e242971:1308:23)
get_next_sibling @ chunk-TFYL3GQY.js?v=4e242971:2346
sibling @ chunk-TFYL3GQY.js?v=4e242971:2394
_layout @ +layout.svelte?t=1734871119624:16
(anonymous) @ chunk-DIK5XZVB.js?v=4e242971:283
update_reaction @ chunk-TFYL3GQY.js?v=4e242971:1308
update_effect @ chunk-TFYL3GQY.js?v=4e242971:1399
create_effect @ chunk-TFYL3GQY.js?v=4e242971:2474
branch @ chunk-TFYL3GQY.js?v=4e242971:2622
(anonymous) @ chunk-DIK5XZVB.js?v=4e242971:277
update_reaction @ chunk-TFYL3GQY.js?v=4e242971:1308
update_effect @ chunk-TFYL3GQY.js?v=4e242971:1399
process_effects @ chunk-TFYL3GQY.js?v=4e242971:1548
flush_queued_root_effects @ chunk-TFYL3GQY.js?v=4e242971:1468
process_deferred @ chunk-TFYL3GQY.js?v=4e242971:1505

System Info

System:
    OS: macOS 14.6.1
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 6.82 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 - /usr/local/bin/node
    npm: 10.8.3 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 131.1.73.97
    Safari: 17.6
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1 
    @sveltejs/kit: ^2.0.0 => 2.14.0 
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.4 
    svelte: ^5.0.0 => 5.15.0 
    vite: ^5.4.11 => 5.4.11

Severity

annoyance

Additional Information

I am not quite certain if this is a bug, an undocumented breaking change, or something else I am missing.

I could not find any documentation that suggested not using body tags in the root layout like this.

The issue happened after the migration from Svelte 4 to Svelte 5 (though I filed the issue in the Kit repo since it has to do with the layout/routing).
@brunnerh
Copy link
Member

brunnerh commented Dec 22, 2024 •
edited
Loading

You cannot have two body tags. There already is one in src/app.html, one of them has to be removed and the browser will automatically remove the one in the +layout. The missing element then causes an error during hydration because an element was expected where there now is none.

(Note that SvelteKit operates on the assumption that %sveltekit.body% in the app.html is inside a body element, so removing the body from there is not really an option.)

@BaumianerNiklas
Copy link
Author

That makes sense, thank you! I guess that was always wrong, it just lead to errors now. Might be worth mentioning somewhere?

@brunnerh
Copy link
Member

Might be worth mentioning somewhere?

Possibly, though the docs are extensive, chances of people missing that would still be high.

Maybe there could be SvelteKit-specific validations that error if a body tag is found anywhere in the components (and if <body> is missing in app.html).

@eltigerchino eltigerchino closed this as not planned Won't fix, can't repro, duplicate, stale Dec 23, 2024
@eltigerchino eltigerchino reopened this Dec 23, 2024
@eltigerchino eltigerchino added the feature / enhancement New feature or request label Dec 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature / enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@brunnerh @eltigerchino @BaumianerNiklas