Svelte 5 Hydration mismatch (with adapter-static)

[whishkid]

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]

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]

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]

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]

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]

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]

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]

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]

Please can you try the latest version of Svelte 5.

[whishkid]

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]

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

[whishkid]

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]

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]

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

[maietta]

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]

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]

@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]

The second is missing the closing tag?

[maietta]

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]

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]

@trueadm,

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

[maietta]

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.