HMR not working

[mp3por]

Build tool

Rollup

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

When I open the PopUp and then make a change in the code base, the pop-up does not reflect that change until I manually refresh the popup by closing and opening it again.

Reproduction

https://github.com/JohnBra/vite-web-extension

Logs

No response

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 102.91 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 9.1.2 - /opt/homebrew/bin/pnpm
    Watchman: 2024.05.06.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 125.1.66.118
    Chrome: 125.0.6422.142
    Safari: 17.5
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.23 => 2.0.0-beta.23
    vite: ^5.2.13 => 5.2.13

Severity

annoyance

[Toumash]

Im not sure why i cannot run your extension on windows, but you're clearly not using vite for HMR.
Nodemon works by watching files changing and rebuilding the whole thing without hmr.

To use any vite dev feature (including hmr) use vite dev mode.

[Toumash]

I have no idea why it doesnt work with existing config in your project but i've managed it to work with some changes.
Adjust the vite.config to your needs - i've removed some things just to not debug it faster.
Manifest defined by defineManifest is better as it (probably) allows the crx to adjust it automatically (at least web_accessible_resources are autogenerated with crxjs)

If that works for you then lets close this issue @mp3por

JohnBra/vite-web-extension#34

demo.gif

[mp3por]

I have no idea what does nowork with fs-extra in your project but i've managed it to work no problem. Adjust the vite.config to your needs - i've removed some things just to not debug it faster

If that works for you then lets close this issue @mp3por

JohnBra/vite-web-extension#34

demo.gif

I will check during the weekend and come back to you.

[Toumash]

@mp3por and?

[mp3por]

@Toumash

I was not able to get the HMR working. When I change my code to look like yours however I get the following issue. This screen keeps flickering. I don't understand enough to debug further.

[Toumash]

@Toumash

I was not able to get the HMR working. When I change my code to look like yours however I get the following issue. This screen keeps flickering. I don't understand enough to debug further.

try it one more time. This is an issue i also have sometimes when swiching branches - restarting the dev server several times helps (and if not remove .vite or node_modules, npm install and run again). It is independent from HMR but something with a server startup.

[mtliendo]

Same issue here on mac m3 running node v22

I'm using vite 3 with "@crxjs/vite-plugin": "^2.0.0-beta.25",.

my manifest is:

{
	"manifest_version": 3,
	"name": "CRXJS React Vite Example",
	"version": "1.0.0",
	"action": { "default_popup": "index.html" }
}

According to the docs I should be able to run npm run dev and assign the generated dist folder to be my chrome extension. But doing so results in the flickering image described above.

If I run npm run build, the correct contents will be generated in the extension, but that of course doesn't use HMR.

In short, when running npm run dev using vite3, the contents are never loaded and instead the flickering occurs because the default loading-screen is never able to fetch the app contents.

package.json:

{
  "name": "chrome-extension-js",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@crxjs/vite-plugin": "^2.0.0-beta.25",
    "@eslint/js": "^9.11.1",
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.2",
    "eslint": "^9.11.1",
    "eslint-plugin-react": "^7.37.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.12",
    "globals": "^15.9.0",
    "vite": "^5.4.8"
  }
}

Vite config:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
	plugins: [react(), crx({ manifest })],
})

[Toumash]

Thats something different #900