HMR seems to trigger, but not work

[rbhalla]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

When a file is modified, I am seeing vite log it in the browser console and in the terminal. However the component itself does not actually update. I have to manually refresh to see the change.

One possible contributor here, is that I am running vite in a docker container. However, looking online, I have seen no evidence to suggest that vite usually struggles with docker as long as the server port is configured correctly.

Reproduction

Using the starter vite project as described in the docs in typescript mode.

This is my docker compose configuration:

chrome-extension:
    image: node:16
    ports:
      - 3000:3000
    volumes:
      - ./chrome_extension:/srv
    working_dir: /srv
    command: >
      sh -c "npm install &&
             npm run start"

My vite.config.js

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

// https://v2.vitejs.dev/config/
export default defineConfig({
  plugins: [react(), crx({ manifest })],
  server: {
    host: true,
    port: 3000,
  },
});

Logs

From a single save:

Terminal:

[vite] hmr update /src/app/components/App.jsx
[crx] files start dist
[vite] hmr update /src/app/components/App.jsx
[crx] files ready in 2339ms
[crx] files start dist
[crx] files ready in 1347ms
[crx] files start dist
[crx] files ready in 1268ms

Console:

[vite] hot updated: /src/app/components/App.jsx.js
[vite] hot updated: /src/app/components/App.jsx.js

System Info

System:
    OS: Linux 5.10 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (6) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.51 GB / 7.77 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
  npmPackages:
    @crxjs/vite-plugin: ^1.0.14 => 1.0.14
    vite: ^2.9.5 => 2.9.15

Severity

blocking an upgrade

[myktra]

I'm not sure Docker is the problem here... I experience similar symptoms in my environment without Docker. I have noticed that when running vite dev, ensuring you are working with vite@2 and React as you are:

• If your user interface is running as a popup (via the action.default_popup setting in the manifest), HMR works mostly reliably.
• If your React components are running in a content script however, it takes multiple saves for the user interface to catch up, and changes to certain files won't refresh the user interface at all.

You will notice the same symptoms if you compare popups and content scripts in the Getting Started tutorial. Popups refresh right away; content scripts require multiple saves.

I'm really hoping once support drops for vite@3 this all gets sorted out!

[rbhalla]

Good validation, maybe I went down the wrong path with this issue. I too am using content scripts over the popups, so maybe that's the actual theme here.

[jacksteamdev]

This issue might be fixed in @crxjs/vite-plugin@^2, which in beta right now; you can test it using:

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

[saxoncameron]

@jacksteamdev I'm also getting inconsistent behaviour with HMR. I'm creating a reasonably complex extension with many different UI context and styles.

Working:

• ✅ HMR for changes in a popup window
• ✅ HMR for changes in a Vue app injected/mounted inside a host page

Not working:

• 🚫 HMR inside the extension Menu
• 🚫 HMR for CSS imported by a content script, to affect host page styles

But for the ones that are "not working", I can also see that HMR was indeed triggered in the Terminal.

Pertinent versions:

• "@crxjs/vite-plugin": "^2.0.0-beta.16",
• "vite": "^4.2.1",
• "@vitejs/plugin-vue": "^4.1.0",

[saxoncameron]

Should I open a new issue maybe? Seemed relevant to this one I thought @jacksteamdev

[Autumnlight02]

I also had the same issue with svelte, Css would not hot reload / lag a single Hot reload behind, but html svelte always is up to date