Content scripts are broken with use of @crxjs/vite-plugin 1.0.13+ in dev mode with yarn package manager

myktra commented 2 years ago

Build tool

Vite

Where do you see the problem?

[X] In the browser
[ ] In the terminal

Describe the bug

When using yarn (but not npm!), the use of the @crxjs/vite-plugin at versions 1.0.13 and higher causes content scripts to break (but not popups) when installing/running the extension via vite dev. The specific error that will appear in the console if ANY React component is injected into a content script:

Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201
    at frame.tsx.js:12:11

This blocks the rendering of the components in the content script (you'll see nothing).

Again, this does NOT happen for React components injected into a popup (i.e. not a content script) - those work fine with vite dev. And a regular vite build works fine as well.

After digging in a little, I noticed that with yarn, when using @crxjs/vite-plugin 1.0.13 and higher, the dependency resolver winds up installing a copy of the newer v2 line of @vitejs/plugin-react, which seems to be a cause of the conflict.

"@vitejs/plugin-react@npm:>=1.2.0":
  version: 2.1.0
  resolution: "@vitejs/plugin-react@npm:2.1.0"

By pinning @crxjs/vite-plugin to 1.0.12, the following resolution in yarn.lock occurs:

"@vitejs/plugin-react@npm:1.3.2, @vitejs/plugin-react@npm:^1.2.0":
  version: 1.3.2
  resolution: "@vitejs/plugin-react@npm:1.3.2"

...and HMR works again with vite dev.

So essentially the ask here is to update the documentation that if you ARE using yarn, which is quite common, that you pin the plugin to 1.0.12. Content scripts will not work with 1.0.13 or higher.

As a hypothetical workaround it may also be possible to use an override in package.json to ensure 1.3.2 of @vitejs/plugin-react is used in the project.

Hopefully all of this goes away once we can use vite@3 and @vitejs/plugin-react@2, which from what I have read requires a rewrite of the file writer.

Reproduction

Here's a repo

The repo above shows a working extension with yarn by pinning @crxjs/vite-plugin to version 1.0.12. Update package.json to pin to 1.0.13 or higher and you'll see that it breaks as described above.

Logs

No response

System Info

System:
    OS: macOS 11.6.8
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 586.50 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/Library/Caches/fnm_multishells/92858_1663708232453/bin/node
    Yarn: 3.2.3 - ~/.yarn/bin/yarn
    npm: 8.11.0 - ~/Library/Caches/fnm_multishells/92858_1663708232453/bin/npm
    Watchman: 2022.09.12.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 105.1.43.93
    Chrome: 105.0.5195.125
    Safari: 15.6.1
  npmPackages:
    @crxjs/vite-plugin: ^1.0.14 => 1.0.14 
    vite: ^2.9.15 => 2.9.15

Severity

annoyance

myktra commented 2 years ago

Added link to repo reproducing the issue above.

jacksteamdev commented 2 years ago

The new file writer will land in @crxjs/vite-plugin v2.0. It's in beta right now, you can test it using:

npm i @crxjs/vite-plugin@beta -D

myktra commented 1 year ago

Now having success with the plugin v2 beta and Vite v3! Thanks!

crxjs / chrome-extension-tools