Svelte 5 Hydration mismatch (with adapter-static) #11509

whishkid · 2024-05-08T09:59:25Z

Describe the bug

Using Svelte 5 with my unchanged (working) Svelte(Kit) Application throws an error.
Not sure how to explain what happens, but a clue could be that I use adapter static?

Reproduction

I dont have the time at the moment to produce a clean reproduction scenario, hopefully there are enough clues from the screenshot.
Maybe I just needed to update some of the related packages?

Logs

[svelte] hydration_mismatchHydration failed because the initial UI does not match what was rendered on the server
warn @ client.js:2578
hydration_mismatch @ warnings.js:28
hydrate @ render.js:171
Svelte4Component @ legacy-client.js:75
(anonymous) @ legacy-client.js:47
initialize @ client.js:409
navigate @ client.js:1350
await in navigate (async)
_goto @ client.js:353
goto @ client.js:1672
start @ client.js:284
(anonymous) @ t26793:27
Promise.then (async)
(anonymous) @ t26793:26
Show 10 more frames
Show less
operations.js:213  Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call')
    at clear_text_content (operations.js:213:19)
    at hydrate (render.js:173:4)
    at new Svelte4Component (legacy-client.js:75:49)
    at new <anonymous> (legacy-client.js:47:4)
    at initialize (client.js:409:9)
    at navigate (client.js:1350:3)

System Info

"devDependencies": {
		"@sveltejs/adapter-static": "^3.0.0",
		"@sveltejs/kit": "^2.0.0",
		"@sveltejs/vite-plugin-svelte": "^3.0.2",
		"autoprefixer": "^10.4.14",
		"eslint": "^8.56.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-svelte": "^2.35.1",
		"postcss": "^8.4.25",
		"postcss-cli": "^10.1.0",
		"postcss-html": "^1.5.0",
		"prettier": "^3.1.1",
		"prettier-plugin-svelte": "^3.1.2",
		"run-p": "^0.0.0",
		"standard-version": "9.5.0",
		"stylelint": "^16.0.2",
		"stylelint-config-css-modules": "^4.4.0",
		"stylelint-config-standard": "^36.0.0",
		"stylelint-config-tailwindcss": "^0.0.7",
		"svelte": "^5.0.0-next.123",
		"svelte-check": "^3.6.0",
		"svelte-preprocess": "^5.0.3",
		"tailwindcss": "^3.4.1",
		"terser": "^5.25.0",
		"typescript": "5.1.3",
		"vite": "^5.0.3",
		"vite-plugin-mkcert": "^1.13.3"
	},

Severity

blocking an upgrade

trueadm · 2024-05-08T15:21:26Z

If you open the dev tools and enable pause on exception, it should stop on the error that occurs that is causing the hydration error. Can you show what that is please?

Also interestingly, it seems that clear_text_content is failing for you. I'm not sure why this is happening as it's passed target which should never be undefined.

whishkid · 2024-05-09T05:51:32Z

Hi
I wanted to check this out for you but decided first to make sure my package situation was up to date better so I made these changes
Deleted npm_modules and removed all things svelty from pacakage, and reinstalled leading to this

svelty-picker seems a bit problematic so I removed it for now. I will contact them, as I have contributed once before

BUT so clicking around in general works, and I cant find the bug I mentioned yesterday but I run into several errors which I will research further
THe first one that seems to re-occur is that I have (simplified), which seems to be occurring in several places in my app even places that are organized pretty differently
{#if selectedSkin} <InputProtected bind:value={selectedSkin.name} id="name" label={$uiText.general_name} bind:inputErrorMsg={nameError} saveFunction={renameSkin} /> {/if}

in my app when clicking in the list of skins i guess skin is temporarily null while swithcing skins to view, and retrievig info from backend. In svelte 4 this does not lead to problems but in Svelte 5
+page.svelte:270 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'name')
at get value (+page.svelte:270:31)
at getter (props.js:247:35)
at from_child (props.js:265:12)
at get value (InputProtected.svelte:33:14)
at getter (props.js:247:35)
at from_child (props.js:265:12)
at setEditingValue (Protected.svelte:100:37)

I tried to make a simple reproduction in the preview REPL but there  no problem
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo1QMW7DMAz8iqAOTgDD7tLFsA1kbNd0qzoostwSlinDopIGgv5eSA5aIF0KTjzyeMcLfASjHW_eAkc5a97ww7LwktN1SY07a0Oal9xZv6qEtE6tsFAvUBDMi12JPePiiY2rnVlR1bmrNmIh8FZkNDE3AbKOhaTUFCfpCKTEIm4bo0dFYJGpT4kf-jgBHo29mOtuH9Jc0I2P3pgNuAAO9lI5Ta8wa-tpt9t3fVrrbiIvUk1FLJ8e94kRBbb17wPYnjyRRWZRGVBTF-6lYy9ww7L5RN8omR4eYMx4urulcAIcmrM0XnchTapkI9a9wFDDGHnJZzvACHrgDa1ex_In-Hzgv9Hrrxx9SjWr3T8Gd276v8rv8RsrjCk7_gEAAA==

whishkid · 2024-05-09T05:52:44Z

NO problem in the REPL though

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo1QsU7DMBD9FcsMaaUoYWGJmkiMsJaNMLiOA6c45yg-t1SW_x2dg0AqC-O9d-_euxflCNZ42bxGiWo2spGPyyJLSdeFB382lowspXdh1YwcvF5hoa7HnmBe3EriCZdAYlzdLIqqzlO1CQvesoaEnwBFKyJ7NMVJeQKlsEjMjwE1gUOhPxS-m-MEeLTuYq-7fWS-p281Bms34AI4uEvlDb3AbFyg3W7fdrzWfls8Kz0VqXy437Mi9Xiof4Pj4RSIHAqH2oKe2nhrnboeNyxHZ_kmyfJ4B2PG-e72_QlwaM7KBtNGZiqOkequx1jDmGQpZzfACGaQDa3BpPKn8Hzgv5Wbz1w5d5rdbh-DmzTdX-e39AXKSGA99gEAAA==

whishkid · 2024-05-09T06:05:07Z

And a separate one i ran into

app.js:105 SyntaxError: Invalid left-hand side in assignment (at +page.svelte:239:12)
handleError @ app.js:105
handle_error @ client.js:1620
load_route @ client.js:1015
await in load_route (async)
navigate @ client.js:1288
(anonymous) @ client.js:2123

trueadm · 2024-05-09T13:55:51Z

And a separate one i ran into app.js:105 SyntaxError: Invalid left-hand side in assignment (at +page.svelte:239:12) handleError @ app.js:105 handle_error @ client.js:1620 load_route @ client.js:1015 await in load_route (async) navigate @ client.js:1288 (anonymous) @ client.js:2123

This sounds like a definite bug in the compiler output. Do you have a REPL for this maybe? We can fix this straight away.

matubu · 2024-05-09T16:31:56Z

I don't know if it can be of any help, but I had the first mentioned error. It occurred only when SSR was disabled. And after updating vite, svelte-kit, and the adapter to the latest version, it fixed the issue.

This is a simplified setup that causes the error:

package.json

{
	...
	"devDependencies": {
		"@sveltejs/adapter-node": "^1.0.0",
		"@sveltejs/kit": "^1.20.4",
		"svelte": "^5.0.0-next.125",
		"vite": "^4.0.0"
	}
}

src/routes/+layout.server.js

export const ssr = false;

src/routes/+page.svelte

<h1>Hello</h1>

whishkid · 2024-05-10T05:52:16Z

I havent been able to reproduce it in an isolated situation working from an empty project yet... I need to take some time probably next week to start from my app situation and break it down.

trueadm · 2024-05-10T20:13:04Z

Please can you try the latest version of Svelte 5.

whishkid · 2024-05-12T08:56:37Z

I just tried wit .130
Now i get this
[vite] connecting...
root.svelte:5
Uncaught (in promise) TypeError: $.add_locations is not a function
at root.svelte:5:44
client.ts:175 [vite] connected.

Running in Edge.
Below my package.json

trueadm · 2024-05-12T10:06:49Z

Sounds like your node_modules might need removing and re-installing. It looks like you removed vite-plugin-svelte too?

whishkid · 2024-05-12T12:53:26Z

Sounds like your node_modules might need removing and re-installing. It looks like you removed vite-plugin-svelte too?

Almost positive I already did that, but will try again tomorrow

whishkid · 2024-05-17T11:31:24Z

Hi... In my project i keep getting this.
I have been trying to make small demo, but impossible to reproduce in a clena environment.

Guess it depends on too many moving parts.

Within my project I have been able to stop causing the problem by making some small changes to my pages/components

But it remains weird to me that it throws Cannot read properties of null (reading 'name') in below situation
{#if selectedItem} <input bind:value={selectedItem.name}/> {/if}

I am going to park this for now, so feel free to close the issue.

trueadm · 2024-05-17T12:25:37Z

If you render you app without SSR, does that error go away?

maietta · 2024-07-01T01:07:29Z

I'm having the same issue, but with the bun adapter, which is a variant of the node adapter.

Can't seem to pin down exactly what's causing it.

maietta · 2024-07-02T01:07:09Z

Hey @trueadm,

CONFIRMED.

Turning off SSR removed this error.

What can you tell us that you might know? Maybe collectively we can figure this out?

My project is complaining about a line of code in bits-ui library which is included with shadcn-svelte. I thought maybe that was it, then I remembered a fresh instance of the Svelte Demo app at creation (the game) also gives this error.

maietta · 2024-07-02T21:26:06Z

@trueadm,

Major update:

Look for this issue with the markup concerning labels and inputs. Let's confirm if this is what's causing other people's issues. The second version is what I had, and it was breaking hydration in SSR mode with the Bun adapter. The working variant is the first one.

<label>The Label
<input />
</label>

vs

<label>The Label</label>
<input />

trueadm · 2024-07-02T22:37:30Z

The second is missing the closing tag?

maietta · 2024-07-02T22:53:13Z

The second is missing the closing tag?

Sorry, i mistyped the example. The tag was indeed and correctly self closed.

I'm trying to convey the label wrapped input tag vs non wrapped.

trueadm · 2024-07-02T23:14:44Z

That’s strange. Can you create a minimal repro that shows the second example failing with hydration? I just tried and it seems to work fine for me

maietta · 2024-07-02T23:53:01Z

@trueadm,

Ugh. Now I can't seem to reproduce this. I thought for sure I nailed it down.

maietta · 2024-07-05T16:09:57Z

UPDATE:

Turns out, Bun was caching old files. I'm no longer getting the errors after forcefully and manually removing all traces of cache and reinstalling packages.

So if you continue to have these errors, give deep cleaning of cache a try.

trueadm closed this as completed Jul 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Svelte 5 Hydration mismatch (with adapter-static) #11509

Svelte 5 Hydration mismatch (with adapter-static) #11509

whishkid commented May 8, 2024

trueadm commented May 8, 2024

whishkid commented May 9, 2024 •

edited

Loading

whishkid commented May 9, 2024 •

edited

Loading

whishkid commented May 9, 2024

trueadm commented May 9, 2024

matubu commented May 9, 2024 •

edited

Loading

whishkid commented May 10, 2024

trueadm commented May 10, 2024

whishkid commented May 12, 2024

trueadm commented May 12, 2024 •

edited

Loading

whishkid commented May 12, 2024

whishkid commented May 17, 2024 •

edited

Loading

trueadm commented May 17, 2024

maietta commented Jul 1, 2024

maietta commented Jul 2, 2024

maietta commented Jul 2, 2024 •

edited

Loading

trueadm commented Jul 2, 2024

maietta commented Jul 2, 2024

trueadm commented Jul 2, 2024

maietta commented Jul 2, 2024

maietta commented Jul 5, 2024

Svelte 5 Hydration mismatch (with adapter-static) #11509

Svelte 5 Hydration mismatch (with adapter-static) #11509

Comments

whishkid commented May 8, 2024

Describe the bug

Reproduction

Logs

System Info

Severity

trueadm commented May 8, 2024

whishkid commented May 9, 2024 • edited Loading

whishkid commented May 9, 2024 • edited Loading

whishkid commented May 9, 2024

trueadm commented May 9, 2024

matubu commented May 9, 2024 • edited Loading

whishkid commented May 10, 2024

trueadm commented May 10, 2024

whishkid commented May 12, 2024

trueadm commented May 12, 2024 • edited Loading

whishkid commented May 12, 2024

whishkid commented May 17, 2024 • edited Loading

trueadm commented May 17, 2024

maietta commented Jul 1, 2024

maietta commented Jul 2, 2024

maietta commented Jul 2, 2024 • edited Loading

trueadm commented Jul 2, 2024

maietta commented Jul 2, 2024

trueadm commented Jul 2, 2024

maietta commented Jul 2, 2024

maietta commented Jul 5, 2024

whishkid commented May 9, 2024 •

edited

Loading

whishkid commented May 9, 2024 •

edited

Loading

matubu commented May 9, 2024 •

edited

Loading

trueadm commented May 12, 2024 •

edited

Loading

whishkid commented May 17, 2024 •

edited

Loading

maietta commented Jul 2, 2024 •

edited

Loading