Svelte error: mount() not available on the server

[m-krebs]

Describe the bug

When creating a wxt project with svelte, the following error occurs in console:

Uncaught Svelte error: lifecycle_function_unavailable
`mount(...)` is not available on the server

This error was discussed in #1228 and should (as of my understanding) be fixed by using @wxt-dev/module-svelte@2.0.1.

Reproduction

reproduction.zip

Steps to reproduce

Run pnpm dlx wxt@latest init, follow the setup and select svelte.
Then cd into the project and replace @wxt-dev/module-svelte: ^2.0.0 with @wxt-dev/module-svelte: ^2.0.1.
Install dependencies: pnpm i.
Build and zip the extension: pnpm zip:firefox.
Visit about:debugging#/runtime/this-firefox and load temporary Add-on.
Click the Add-ons Icon in Add-on bar and check console in Add-on Inspector.

System Info

System:
    OS: Linux 6.6 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 5800X3D 8-Core Processor
    Memory: 25.36 GB / 31.27 GB
    Container: Yes
    Shell: 3.7.1 - /bin/fish
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    npm: 10.5.0 - ~/.local/share/pnpm/npm
    pnpm: 9.15.0 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chromium: 131.0.6778.108
  npmPackages:
    wxt: ^0.19.13 => 0.19.22

Used Package Manager

pnpm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[avi12]

I also face this issue, but only in my existing project
In a new one, I can run the Svelte-powered popup without issues

[m-krebs]

In a new one, I can run the Svelte-powered popup without issues

That's interesting. Could you upload a .zip with the working version?

[avi12]

https://github.com/avi12/wxt-svelte-test
wxt-svelte-test.zip

[m-krebs]

I tried your example, but I have the same Issue when building the extension and loading it manually in both chrome and firefox. How do you load the build extension into your browser?

[avi12]

In the example ext I let WXT launch the browser in dev mode

[m-krebs]

Yeah, dev mode works on mine, too. I only have the problem when building and manually testing in my browser.

[avi12]

@m-krebs I cannot reproduce the issue in my project, whether I let WXT launch the browser for me or I manually sideload it unpacked

[avi12]

Yeah, dev mode works on mine, too.

That's the thing, I only tried running in dev mode, and yet on YTHD it works nicely but my other project cannot run Svelte in the popup/content script 😐

[m-krebs]

That's makes it complicated 😅. Could you explain, how you sideload the extension? I might be doing it wrong.
Maybe that might help find the issue with your existing project.

[avi12]

I just run wxt and put the build/chrome-mv3-development folder in Chrome, or let WXT load it into a temp Chrome instance

[ZerGo0]

Can confirm that this happens in none dev builds.

1. Run pnpm dlx wxt@latest init and select the svelte template
2. Run pnpm build
3. Load the extension unpacked in chrome
   3.1. Visit chrome://extensions/
   3.2. Click the Load unpacked button and point it the the example extension directory (/path/to/proj/.output/chrome-mv3/)
4. Open the example extension pop-up
   This should log an error in the chrome extension logs:

Uncaught Svelte error: lifecycle_function_unavailable `mount(...)` is not available on the server https://svelte.dev/e/lifecycle_function_unavailable

Context
popup.html

This also happens when you zip it (probably anything that isn't dev) and in Firefox.

[andreasnuesslein]

i found a temporary fix, folks:

go to node_modules/@wxt-dev/module-svelte/dist/index.mjs and do:

- conditions: mode === "development" ? ["browser"] : []
+ conditions: mode === "development" ? ["browser"] : ["browser"]

or just conditions: ["browser"]

after this, npm run build should give something that works. at least for me. cheers

PS: If that does not work, there's also a .cjs file - maybe change that one instead.

[m-krebs]

@andreasnuesslein Yeah, this seems to work temporarily. The extension just logs a warning about NODE_ENV unset or so. It probably has to do something with the Vite bundling.