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

Svelte 5 : hydration_html_changed when using $_ or $json and {@html} #262

Open
marc-bouvier opened this issue Nov 15, 2024 · 0 comments
Open

Svelte 5 : hydration_html_changed when using $_ or $json and {@html} #262

marc-bouvier opened this issue Nov 15, 2024 · 0 comments

Comments

@marc-bouvier
Copy link

marc-bouvier commented Nov 15, 2024 •
edited
Loading

Describe the bug

In Svelte 5, when svelte-i18n translations ($_() or $json()) are used along with {@html } then it fallbacks to default language.

I wonder if I am doing something that should work or If I misunderstood how to use Svelte and svelte-i18n.

Screenshot to illustrate

image

Fallbacks to default (french)

{#each $json('philosophy.paragraphs') as paragraph}
   <p>{@html paragraph}</p>
{/each}
   <p>{@html $_('singular.html')}</p>
   
<hr/>

Does not fallback

{#each $json('philosophy.paragraphs') as paragraph}
   <p>{paragraph}</p>
{/each}

<p>{$_('singular.html')}</p>
Default translation file sample `fr.json` : 
{
	"page": {
		"title": "🇫🇷 svelte-i18n avec $json() et {@html}"
	},
	"philosophy": {
		"title": "🇫🇷 Notre philosophie",
		"paragraphs": [
			"🇫🇷 Français Foo <strong>Bar</strong>", 
			"🇫🇷 Baz <strong>Polop ! </strong>"
		]
	},
"singular.html":"🇫🇷 Phrase seule avec des <strong>éléments HTML</strong>."
}
Translation file sample `en.json` : 
{
	"page": {
		"title": "🇬🇧 svelte-i18n with $json() and {@html}"
	},
	"philosophy": {
		"title": "🇬🇧Our philosophy",
		"paragraphs": [
			"🇬🇧 English Foo <strong>Bar</strong>", 
			"🇬🇧 Baz <strong>Polop ! </strong>"
		]
	},
	"singular.html":"🇬🇧 Singular sentence with <strong>HTML elements</strong>."
}

Logs

Browser logs

+page.svelte:47 [svelte] hydration_html_changed The value of an `{@html ...}` block near src/​routes/​+page.svelte:52:1 changed between server and client renders. The client value will be ignored in favour of the server value

To Reproduce

Repository : https://github.com/marc-bouvier/svelte-i18n-json-at-html

  • Checkout the repository and run npm start.
  • Open http://localhost:5173
  • Set your browser language to english.

In this application default language is french. It will fallback to french by default.

Expected behavior

When your main language is english, the paragraphs below should be in english... But, they fallback to default language : french.

Stacktraces

Stack trace : "hydration_html_changed" 
+page.svelte:47 [svelte] hydration_html_changed The value of an `{@html ...}` block near src/​routes/​+page.svelte:52:1 changed between server and client renders. The client value will be ignored in favour of the server value

warn @ client.js?v=3056b061:2682

hydration_html_changed @ chunk-6CYEJA6J.js?v=3056b061:343

check_hash @ chunk-TQUCQ5FU.js?v=3056b061:1007

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:1047

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

branch @ chunk-6CYEJA6J.js?v=3056b061:1325

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:1028

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

block @ chunk-6CYEJA6J.js?v=3056b061:1322

html @ chunk-TQUCQ5FU.js?v=3056b061:1016

_page @ +page.svelte:47

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:251

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

branch @ chunk-6CYEJA6J.js?v=3056b061:1325

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:245

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

block @ chunk-6CYEJA6J.js?v=3056b061:1322

wrapper @ chunk-TQUCQ5FU.js?v=3056b061:238

(anonymous) @ root.svelte:48

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:1191

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

branch @ chunk-6CYEJA6J.js?v=3056b061:1325

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:1191

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

block @ chunk-6CYEJA6J.js?v=3056b061:1322

component @ chunk-TQUCQ5FU.js?v=3056b061:1184

(anonymous) @ root.svelte:48

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:1143

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:1131

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

branch @ chunk-6CYEJA6J.js?v=3056b061:1325

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:1129

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

block @ chunk-6CYEJA6J.js?v=3056b061:1322

snippet @ chunk-TQUCQ5FU.js?v=3056b061:1120

_layout @ +layout.svelte:10

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:251

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

branch @ chunk-6CYEJA6J.js?v=3056b061:1325

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:245

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

block @ chunk-6CYEJA6J.js?v=3056b061:1322

wrapper @ chunk-TQUCQ5FU.js?v=3056b061:238

(anonymous) @ root.svelte:46

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:1191

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

branch @ chunk-6CYEJA6J.js?v=3056b061:1325

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:1191

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

block @ chunk-6CYEJA6J.js?v=3056b061:1322

component @ chunk-TQUCQ5FU.js?v=3056b061:1184

(anonymous) @ root.svelte:46

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:558

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

branch @ chunk-6CYEJA6J.js?v=3056b061:1325

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:558

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

block @ chunk-6CYEJA6J.js?v=3056b061:1322

if_block @ chunk-TQUCQ5FU.js?v=3056b061:539

Root @ root.svelte:42

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:251

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

branch @ chunk-6CYEJA6J.js?v=3056b061:1325

(anonymous) @ chunk-TQUCQ5FU.js?v=3056b061:245

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

block @ chunk-6CYEJA6J.js?v=3056b061:1322

wrapper @ chunk-TQUCQ5FU.js?v=3056b061:238

(anonymous) @ chunk-2CUNGZBJ.js?v=3056b061:526

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

branch @ chunk-6CYEJA6J.js?v=3056b061:1325

(anonymous) @ chunk-2CUNGZBJ.js?v=3056b061:506

update_reaction @ chunk-6CYEJA6J.js?v=3056b061:1722

update_effect @ chunk-6CYEJA6J.js?v=3056b061:1813

create_effect @ chunk-6CYEJA6J.js?v=3056b061:1193

effect_root @ chunk-6CYEJA6J.js?v=3056b061:1267

_mount @ chunk-2CUNGZBJ.js?v=3056b061:504

hydrate @ chunk-2CUNGZBJ.js?v=3056b061:453

Svelte4Component @ chunk-2CUNGZBJ.js?v=3056b061:696

(anonymous) @ chunk-2CUNGZBJ.js?v=3056b061:654

initialize @ client.js?v=3056b061:447

_hydrate @ client.js?v=3056b061:2429

await in _hydrate

start @ client.js?v=3056b061:306

(anonymous) @ (index):32

Promise.then

(anonymous) @ (index):31

Information about your project:

  • Your browser and the version: Brave [Version 1.71.123 Chromium: 130.0.6723.116 (Official Build) (arm64]

  • Your operating system: MacOS Sequoia 15.0 (24A335)

  • svelte-i18n version : 4.0.1

  • Whether your project uses Webpack or Rollup : Vite

  • Svelte version : 5.2.0
@marc-bouvier marc-bouvier changed the title hydration_html_changed when using $json() and {@html} in svelte 5 Svelte 5 : hydration_html_changed when using $_() or $json() and {@html} Nov 15, 2024
@marc-bouvier marc-bouvier changed the title Svelte 5 : hydration_html_changed when using $_() or $json() and {@html} Svelte 5 : hydration_html_changed when using $_ or $json and {@html} Nov 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@marc-bouvier