search

aklinker1 / vite-plugin-web-extension

Vite plugin for developing Chrome/Web Extensions
https://vite-plugin-web-extension.aklinker1.io/
MIT License
653 stars 57 forks source link

React HMR is Touchy #117

Closed aklinker1 closed 1 year ago

aklinker1 commented 1 year ago

Summary

HMR is very touchy - components have to be written a very specific way for them to work with HMR. This is not how regular vite projects work.

Reproduction

pnpm create vite-plugin-web-extension <project-name> --template react-ts

Then change the Popup component - give it a name or don't export it by default, and HMR breaks.

Environment

  System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1.62 GB / 16.00 GB
    Shell: 5.9 - /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: 114.0.5735.90
    Firefox Developer Edition: 114.0
    Safari: 16.4
  npmPackages:
    vite: ^4.1.4 => 4.3.9 
    vite-plugin-web-extension: ^3.0.1 => 3.0.9

Related

aklinker1 commented 1 year ago

I believe the fix in v3.2.0, https://github.com/aklinker1/vite-plugin-web-extension/commit/ca5cd55027804e877e908c54a45434a517e4efe1, should improve frontend framework support.