Svelte 5: SSR hydratation mismatch

[jamesst20]

Vite Plugin Version

1.0.5

Laravel Version

9.52.10 (Yeah I know but it shouldn't matter here)

Node Version

20.16.0

NPM Version

10.8.1

Operating System

macOS

OS Version

14.5

Web browser and version

Chrome 127.0.6533.120

Running in Sail?

No

Description

App.svelte:19 [svelte] hydration_mismatch
Hydration failed because the initial UI does not match what was rendered on the server

Hi,

I'm getting an hydratation mismatch error in a playground of a library i'm adding Svelte 5 support.
Playground: https://github.com/jamesst20/inertia/tree/main/playgrounds/svelte

I thought at first there was something wrong with Svelte itself but their team seems to believe it could come from this plugin and I though maybe the laravel vite plugin team could share some insights.

Here is the github issue but you can start reading at the the comment #2330053369 the before is irrelevent
sveltejs/svelte#13115 (comment)

Useful comments as of (September 9, 11h10AM, UTC -5)

Okay, so after digging into this for hours with @dummdidumm it turns out the issue is with laravel-vite-plugin. It doesn't seem to be calling into the same Svelte compiler as the vite-plugin used for the client hydration – in fact it seems completely detached. This is where the issue is though – as the server components are compiled with hmr always disabled and the client compiler runs with it enabled – and this is why you are having your mismatch.

I honestly don't know enough about laravel-vite-plugin either. It seems to not be using the @sveltejs/vite-plugin-svelte plugin though, as if I put a console.log inside the vite-plugin-svelte in node_modules and check for ssr, then it's never run with true. So I'm utterly confused as to how laravel-vite-plugin is working.

Maybe it's this line that's setting hmr to false for Vite, but only on the server? And because nothing is set on the client v-p-s sets it true there?

vite-plugin/src/index.ts

Lines 162 to 165 in 7252168

	hmr: userConfig.server?.hmr === false ? false : {
	...serverConfig.hmr,
	...(userConfig.server?.hmr === true ? {} : userConfig.server?.hmr),
	},

Steps To Reproduce

Explained here: https://github.com/sveltejs/svelte/issues/13115#issuecomment-2330368445

(Have a compatible PHP version installed like 8.1)

1. git clone https://github.com/jamesst20/inertia.git
2. cd inertia
3. pnpm install
4. pnpm run build:all
5. cd playgrounds/svelte
6. cp .env.example .env
7. composer install
8. php artisan keys:generate
9. Terminal 1: php artisan serve
10. Terminal 2: pnpm run dev
11. Terminal 3: pnpm run build && php artisan inertia:start-ssr
12. Visit http://localhost:8000/

[timacdonald]

@jamesst20, could you please take a look at laravel/jetstream#1320 and specifically this comment.

I think you will need to use vite watch instead of npm run dev. Take a look and let us know.