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: using inlang Paraglide JS message in <svelte:head> meta description tag causes error in SSR #12458

Closed
henrikvilhelmberglund opened this issue Jul 16, 2024 · 0 comments · Fixed by #12475
Assignees
Labels
Milestone

Comments

@henrikvilhelmberglund
Copy link

Describe the bug

Svelte 5: using inlang Paraglide JS message in svelte:head meta description tag causes error in SSR.

Eg. this:

<svelte:head>
  <meta name="description" content="{m.title()}" />
</svelte:head>

The error is the following:

Uncaught (in promise) Svelte error: svelte_component_invalid_this_value
The `this={...}` property of a `<svelte:component>` must be a Svelte component, if defined

The error started appearing in 5.0.0-next.179. Changing the version to 5.0.0-next.178 makes it work again, also disabling SSR makes it work.

Reproduction

Paraglide doesn't run on Stackblitz so the repro needs to be cloned.
Repro: https://github.com/henrikvilhelmberglund/svelte-inlang-repro
Working: Change branch to working or just install 5.0.0-next.178.

Logs

(in browser)
Uncaught (in promise) Svelte error: svelte_component_invalid_this_value
The `this={...}` property of a `<svelte:component>` must be a Svelte component, if defined
    at svelte_component_invalid_this_value (http://localhost:5174/node_modules/.vite/deps/chunk-2WU4MH3N.js?v=bc39b3ac:196:19)
    at Module.validate_dynamic_component (http://localhost:5174/node_modules/.vite/deps/chunk-ZVJJQCF7.js?v=bc39b3ac:2785:7)
    at http://localhost:5174/@fs/C:/Github/repros/svelte-inlang-repro/.svelte-kit/generated/root.svelte:84:11
    at http://localhost:5174/node_modules/.vite/deps/chunk-ZVJJQCF7.js?v=bc39b3ac:949:30
    at update_reaction (http://localhost:5174/node_modules/.vite/deps/chunk-2WU4MH3N.js?v=bc39b3ac:1038:23)
    at update_effect (http://localhost:5174/node_modules/.vite/deps/chunk-2WU4MH3N.js?v=bc39b3ac:1156:21)
    at create_effect (http://localhost:5174/node_modules/.vite/deps/chunk-2WU4MH3N.js?v=bc39b3ac:274:7)
    at branch (http://localhost:5174/node_modules/.vite/deps/chunk-2WU4MH3N.js?v=bc39b3ac:396:10)
    at http://localhost:5174/node_modules/.vite/deps/chunk-ZVJJQCF7.js?v=bc39b3ac:949:17
    at update_reaction (http://localhost:5174/node_modules/.vite/deps/chunk-2WU4MH3N.js?v=bc39b3ac:1038:23)Svelte error: svelte_component_invalid_this_value
The `this={...}` property of a `<svelte:component>` must be a Svelte component, if defined
    at svelte_component_invalid_this_value (http://localhost:5174/node_modules/.vite/deps/chunk-2WU4MH3N.js?v=bc39b3ac:196:19)
    at Module.validate_dynamic_component (http://localhost:5174/node_modules/.vite/deps/chunk-ZVJJQCF7.js?v=bc39b3ac:2785:7)
    at http://localhost:5174/@fs/C:/Github/repros/svelte-inlang-repro/.svelte-kit/generated/root.svelte:84:11
    at http://localhost:5174/node_modules/.vite/deps/chunk-ZVJJQCF7.js?v=bc39b3ac:949:30
    at update_reaction (http://localhost:5174/node_modules/.vite/deps/chunk-2WU4MH3N.js?v=bc39b3ac:1038:23)
    at update_effect (http://localhost:5174/node_modules/.vite/deps/chunk-2WU4MH3N.js?v=bc39b3ac:1156:21)
    at create_effect (http://localhost:5174/node_modules/.vite/deps/chunk-2WU4MH3N.js?v=bc39b3ac:274:7)
    at branch (http://localhost:5174/node_modules/.vite/deps/chunk-2WU4MH3N.js?v=bc39b3ac:396:10)
    at http://localhost:5174/node_modules/.vite/deps/chunk-ZVJJQCF7.js?v=bc39b3ac:949:17
    at update_reaction (http://localhost:5174/node_modules/.vite/deps/chunk-2WU4MH3N.js?v=bc39b3ac:1038:23)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-2600K CPU @ 3.40GHz
    Memory: 837.46 MB / 15.95 GB
  Binaries:
    Node: 20.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.18 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (126.0.2592.102)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    svelte: 5.0.0-next.185 => 5.0.0-next.185

Severity

blocking an upgrade

@dummdidumm dummdidumm self-assigned this Jul 17, 2024
@dummdidumm dummdidumm added the bug label Jul 17, 2024
@dummdidumm dummdidumm added this to the 5.0 milestone Jul 17, 2024
dummdidumm added a commit that referenced this issue Jul 17, 2024
The head hydration anchor didn't update after hydrating the contents of one `<svelte:head>` element, which meant subsequent `<svelte:head>` elements would always start at the beginning of the head. This PR fixes that. The test was updated such that the shape of each `<svelte:head>` content is sufficiently different to throw an error if this wasn't fixed.

fixes #12458
Rich-Harris pushed a commit that referenced this issue Jul 17, 2024
The head hydration anchor didn't update after hydrating the contents of one `<svelte:head>` element, which meant subsequent `<svelte:head>` elements would always start at the beginning of the head. This PR fixes that. The test was updated such that the shape of each `<svelte:head>` content is sufficiently different to throw an error if this wasn't fixed.

fixes #12458
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants