SvelteKit versions above 1.7.2 don't work for developing browser extensions

[oblitzitate]

Describe the bug

If you try to use a version above 1.7.2 to develop a browser extension, page scripts don't seem to work.

For instance, if you have the following as your popup page...

<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

...it won't update the UI on click so the count will remain 0

Reproduction

npm create svelte@latest myapp
cd myapp
npm install
npm i -D stephentuso/sveltekit-adapter-browser-extension

svelte.config.js

import adapter from 'sveltekit-adapter-browser-extension';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    appDir: 'ext',
    adapter: adapter({
      pages: 'build',
      assets: undefined,
      fallback: undefined,
      manifestVersion: 3,
      manifest: {
        "action": {
          "default_popup": "popup.html"
        }
      },
    }),
    csp: { directives: { 'script-src': ['self'] } },
  },
};

export default config;

src/routes/+layout.ts

export const prerender = true;

src/routes/+page.svelte

src/routes/popup/+page.svelte

<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Now load the app as a browser extension:

• In Firefox, you would go to about:debugging address, click This Firefox link, click Load Temporary Add-on..., then open the app's manifest.json in its build directory.
• In Chrome, you would go to Menu > More tools > Extensions, click Load unpacked, then open the build directory

Open the extension's popup, and try clicking the button. It won't change.

Logs

No response

System Info

System:
    OS: Linux 6.1 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz
    Memory: 11.63 GB / 15.51 GB
    Container: Yes
    Shell: 3.6.0 - /usr/bin/fish
  Binaries:
    Node: 19.6.1 - /usr/bin/node
    npm: 8.19.2 - /usr/bin/npm
  Browsers:
    Chromium: 110.0.5481.100
    Firefox: 110.0

Severity

serious, but I can work around it

Additional Information

To workaround this, downgrade:
npm install @sveltejs/kit@1.7.2

[Rich-Harris]

Try to develop a browser extension using any version above 1.7.2.

This is not a reproduction.

[oblitzitate]

Updated.

[Rich-Harris]

Now load the app as a browser extension

How? I've never done this before

[oblitzitate]

Updated for instructions for Firefox and Chrome.

[dummdidumm]

My guess is this has something to do with our switch from <script module> to regular <script>, and that it needs a change in the adapter. Looking at the source code of the adapter it seems to have the assumption (which is no longer true) that we have module scripts defined. @antony can you provide more insights?

[Rich-Harris]

Yep, that's the issue. I've opened antony/sveltekit-adapter-browser-extension#24, so I'll close this