Vue content scripts crash in dev mode

[aklinker1]

Summary

Works fine in production. When including a vue app in a content script, the content script errors out.

It looks like the vue plugin thinks it's running in dev mode, so tries it to include import.meta.hot references to enable HMR, but the content scripts are never built in dev mode, and thus import.meta.hot is replaceed with (void 0).

Reproduction

The packages/demo-vue extension has this problem. Run pnpm dev then go to google.com and open the console. This is where the screenshots from above come from.

Environment

  System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1.40 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.asdf/installs/nodejs/lts/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/lts/.npm/bin/yarn
    npm: 8.15.0 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 112.0.5615.49
    Firefox Developer Edition: 112.0
    Safari: 15.6
  npmPackages:
    vite: ^4.1.4 => 4.1.4 
    vite-plugin-web-extension: workspace:* => 3.0.3

[aklinker1]

Fixed. In summary, the plugin stored information about the current build process in memory. Before, since only a single vue plugin was used, some internal variables are set when spinning up the dev server and all subsequent transformations (HTML files and script files) believe they have a dev server. This lead to the plugin trying to configure HMR for non dev server build steps, like content scripts.

I've setup a hardcoded list of plugin names that can be updated if more plugins use this same approach.

---

To use Vue in content scripts, you'll need to add the Vue plugin to your scriptViteConfig as well as your regular plugin list.

https://github.com/aklinker1/vite-plugin-web-extension/pull/101/files#diff-7e17b9fe996dc340cc96cc424856e1e084123b6405411e47712e038b49eaafaeR20-R22

[aklinker1]

Released in v3.0.6

[ListenV]

I have a similar problem.

My project only has background script, no content script, and it include pinia.

[aklinker1]

@ListenV No HTML pages either? Could you share a minimal reproduction?

[ListenV]

@aklinker1 demo-vue is just that.

demo-vue still has this problem

[aklinker1]

Hmm, I'll have to double check, but demo-vue was the project I used to fix this bug. I'm quite confident it's working.

[yujinlin0224]

Still has problem in popup for me

[aklinker1]

Sorry for the late replies, been busy these last few weeks. @ListenV, I've verified that the demo-vue extension works from my active development clone and a brand new clone:

https://user-images.githubusercontent.com/10101283/233679681-b0a022d9-445a-4f2c-a6f9-666b59cc2cd0.mov

No error messages in the console from the extension. Make sure you're up to date with main.

[aklinker1]

@yujinlin0224 You're having a problem with an HTML page? That's not related to this issue with Vue in content scripts. Could you open a new issue and share a minimal reproduction?

[yujinlin0224]

@aklinker1 I opened https://github.com/aklinker1/vite-plugin-web-extension/issues/102, please check

[aklinker1]

Hey all, I have reverted the fix for this issue because it was causing a different bug, #102. Instead, I applied a different fix...

For v3.0.7 and onward, just add the Vue plugin in the regular plugins field, not the scriptViteConfig

defineViteConfig({
  plugins: [
    vue(),
    webExtnesion({
-     scriptViteConfig: {
-       plugins: [vue()],
-     },
    }),
  ],
});

Documenation is up to date: https://vite-plugin-web-extension.aklinker1.io/guide/frontend-frameworks.html#vue