possible bug with latest svelte, vite and wxt

[sgcullen]

I've just updated my chrome extension to Vite 6.01 and the latest wxt and have run into an issue and I thought I'd just post my initial in case anyone has any tips. It's really inadequately written up (I'm short on time this afternoon!) so I'll add some more detail later! :-)

Thanks all! :-)

I'm using svelte (latest) and have the following error logging in the console:
Uncaught (in promise) Svelte error: lifecycle_function_unavailable mount(...) is not available on the server at lifecycle_function_unavailable

I've also got an error showing in the wxt.config.ts:

import { defineConfig } from 'wxt';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: () => ({
    plugins: [tailwindcss()],
  }),
  modules: ['@wxt-dev/module-svelte'],
  srcDir: 'src',
  entrypointsDir: 'entrypoints',
  manifest: {
    permissions: ['storage'],
  },
  imports: {
    eslintrc: {
      enabled: 9,
    },
  },
});

Type '() => { plugins: Plugin<any>[][]; }' is not assignable to type '(env: ConfigEnv) => WxtViteConfig | Promise<WxtViteConfig>'

[aiktb]

The second error is related to installing multiple versions of vite, see #1015 (comment)

[sgcullen]

The second error is related to installing multiple versions of vite, see #1015 (comment)

I think you're right here. I fixed by removing the node_modules directory and reinstalling everything. The error has gone now.
The first error of Uncaught (in promise) Svelte error: lifecycle_function_unavailable mount(...) is not available on the server at lifecycle_function_unavailable remains - I'll have to do some more work on that and provide more info here. If anyone has some more insight here, hugely appreciated.

Thanks @aiktb :-)

[sgcullen]

I've managed to get some things working by adding the compiler option "verbatimModuleSyntax": true to tsconfig.json but this the introduces other issues to do with rollup and lightning css.

Additionally, I seemed to need to add the following to wxt.config.ts within the vite configuration :

resolve: {
      conditions: mode === 'development' ? ['browser'] : [],
    },

This seemed to remove the error of "lifecycle_function_unavailable mount(...) is not available on the server at lifecycle_function_unavailable".

I'm still experimenting at the moment and don't quite have the reasoning for the fixes which is why I'm not able to explain the issue too well!

[aklinker1]

There was an issue or discussion around vite 6... There was a change you have to make for it to work. Can't find it on mobile.

[aklinker1]

Oh lol, it was this one. @m-krebs should work fine in both dev and production. Can you open an issue with a reproduction?

[m-krebs]

Sure, created #1274

[m-krebs]

So I analyzed the Issue a little bit more @aklinker1. Vite uses (as far as I understand) the resolve.condition, to tell how module resolution should work. So in development mode browser is used, but in production probably production.
This causes the extension to think mount() is executed in a server environment.
At least that's what I think it's doing.

Is it the same extension

• when running wxt build and then sideloading it unpacked in the browser,
• when wxt zip and publishing it to the extension store(s) and then installing,
  or do they have different contexts?
  Because as of now, running wxt build uses vite's mode -m production and that still has the svelte mount error.

[aklinker1]

@m-krebs so is it as simple as changing this line:

https://github.com/wxt-dev/wxt/blob/main/packages%2Fmodule-svelte%2Fsrc%2Findex.ts#L25

To

resolve: ['browser']