`browser.hydrate: false` breaks client-side router

Describe the bug

Setting browser.hydrate to false renders the client-side router unusable whilst not disabling it. This results in the following behaviour:

1. Link gets clicked
2. URL in address bar changes
3. Content of page stays unchanged

Setting export const hydrate = false on a page does interestingly not break the router.

Reproduction

🚩 Link to a demo

1. Start the dev server and click on the links to observe the broken router
2. Comment the browser: { hydrate: false }, line in svelte.config.js and restart the dev server to see the router working again.

Logs

When clicking on link (browser console):

[HMR][Svelte] Unrecoverable HMR error in <Root>: next update will trigger a full reload
Uncaught (in promise) Error: options.hydrate only works if the component was compiled with the `hydratable: true` option
    at Object.claim [as l] (root.svelte? [sm]:50:13)
    at init (index.mjs:1883:40)
    at new Root (root.svelte? [sm]:16:25)
    at createProxiedComponent (svelte-hooks.js:341:9)
    at new ProxyComponent (proxy.js:242:7)
    at new Proxy<Root> (proxy.js:349:11)
    at initialize (start.js:702:10)
    at update (start.js:631:4)
    at async navigate (start.js:1241:3)

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Memory: 10.11 GB / 15.93 GB
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.36)
  npmPackages:
    @sveltejs/adapter-netlify: ^1.0.0-next.51 => 1.0.0-next.51
    @sveltejs/kit: next => 1.0.0-next.299
    svelte: ^3.46.4 => 3.46.4

Severity

serious, but I can work around it

Additional Information

No response

[dummdidumm]

The first problem is that hydrate: true is unconditionally set in the code (where root.svelte is generated). Setting this to false for testing purposes reveals a different problem then: If a link is followed, the page is duplicated below the original page and the original page is "frozen" (no links are followed, that happens in the duplicated page below). If then the router is also disabled through router: false it works as expected. But users could enable the router or the hydration on a page-by-page basis (like the about page in the example app during dev) which makes this buggy behavior reoccur.

This reveals the following problem:

The missing ability to tell Vite(-plugin-svelte) to compile some components with the hydratable option and others without it. Right now the hydratable compiler option is defined through browser.hydrate.

• If this is set to false but some pages have hydrate = true, then the output for this specific Svelte component is wrong. This gets worse because sub components may be used on different pages and it's not easy to find out which components are used on non-hydratable pages only and therefore could also omit the hydratable option. Furthermore, since Svelte starts at the root for hydration and calls children recursively, we need to have the root to be hydratable, else child component's hydrate methods are never called - but setting the root to hydratable throws the error mentioned here.
• The problem is the other way around if browser.hydrate = true but some pages have hydrate = false - though its not as bad as it only produces unnecessary hydration code.

I wonder what's the best approach to solving this. I don't see a world where we can tell vite-plugin-svelte to compile specific components differently, since the hydratable option can be based on a dynamic value, so we would have to evaluate stuff before compiling. So the easiest option seems to always add the hydratable option when compiling Svelte components regardless of hydrate, or if we want to be more sophisticated, run a string regex on all page files to check if anyone has the hydratable option and if not we can safely turn hydratable off.

I also wonder how many people actually use the browser options - or rather, use the specific combination of hydrate: false, router: true - since this bug seems pretty apparent, yet this only has one thumbs up.

[benmccann]

Yeah, I think I'd make hydrate: false and router: true throw an error or make hydrate: false disable the router or something along those lines.

[FarhanAliRaza]

Uncaught (in promise) Error: options.hydrate only works if the component was compiled with the hydratable: true option
My app was working fine. Then I updated sveltekit to the latest version now it is giving this error

[VirgileD]

@FarhanAliRaza I'm really stuck at this point, did you find something relevant about this error?

[FarhanAliRaza]

i created a new project and copied over code
@VirgileD

[jessmartin]

I ran into this by following the TailwindCSS docs, which instruct you to configure svelte.config.js thusly:

import preprocess from "svelte-preprocess";

const config = {
  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],
}

The correct configuration is as so:

import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter()
	},
	preprocess: [
		preprocess({
			postcss: true,
		}),
	],
};

export default config;