`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

[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

[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;