HMR doesn't work

[Kurohyou]

Build tool

Vite

Where do you see the problem?

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

Describe the bug

Following the Vite 3 instructions, HMR does not work. In the popup's console, I see the following error:

client.ts:77 WebSocket connection to 'ws://localhost/' failed: 
setupWebSocket @ client.ts:77
Show 1 more frame
client.ts:77 Uncaught (in promise) DOMException: Failed to construct 'WebSocket': The URL 'ws://localhost:undefined/' is invalid.
    at setupWebSocket (chrome-extension://papdbjhkiieikcdobehdenilkjknhjfo/@vite/client:245:20)
    at fallback (chrome-extension://papdbjhkiieikcdobehdenilkjknhjfo/@vite/client:224:22)
    at WebSocket.<anonymous> (chrome-extension://papdbjhkiieikcdobehdenilkjknhjfo/@vite/client:259:13)
setupWebSocket @ client.ts:77
fallback @ client.ts:42
(anonymous) @ client.ts:98
Show 3 more frames

Reproduction

• Follow the setup instructions for vite 3
• Then follow the development basics instructions
• Observe that changing the styling does not update the popup via HMR
• Observe that the console has several errors related to websocket

Logs

client-worker:35 [vite] connecting...
client-worker:50 [vite] connected.
client.ts:18 [vite] connecting...
DevTools failed to load source map: Could not load content for chrome-extension://papdbjhkiieikcdobehdenilkjknhjfo/node_modules/.vite/deps/vue.js.map: System error: net::ERR_FILE_NOT_FOUND
client.ts:77 WebSocket connection to 'ws://localhost/' failed: 
setupWebSocket @ client.ts:77
Show 1 more frame
client.ts:77 Uncaught (in promise) DOMException: Failed to construct 'WebSocket': The URL 'ws://localhost:undefined/' is invalid.
    at setupWebSocket (chrome-extension://papdbjhkiieikcdobehdenilkjknhjfo/@vite/client:245:20)
    at fallback (chrome-extension://papdbjhkiieikcdobehdenilkjknhjfo/@vite/client:224:22)
    at WebSocket.<anonymous> (chrome-extension://papdbjhkiieikcdobehdenilkjknhjfo/@vite/client:259:13)
setupWebSocket @ client.ts:77
fallback @ client.ts:42
(anonymous) @ client.ts:98
Show 3 more frames

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 2.13 GB / 15.68 GB
  Binaries:
    Node: 18.4.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1848.0), Chromium (114.0.1823.67)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.18 => 2.0.0-beta.18
    vite: ^4.3.9 => 4.3.9

Severity

annoyance

[bobmccracken]

I ran into a similar issue using vite@4. My solution was to define the port in vite.config.ts. See https://vitejs.dev/config/server-options.html#server-port

e.g.

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

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

[molvqingtai]

I ran into a similar issue using vite@4. My solution was to define the port in vite.config.ts. See https://vitejs.dev/config/server-options.html#server-port

e.g.

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

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

It doesn't work.

[code-vagabond]

I ran into a similar issue using vite@4. My solution was to define the port in vite.config.ts. See https://vitejs.dev/config/server-options.html#server-port

e.g.

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

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

I needed to specify the same server port that the client is using which is in my case was 5173 not 3000 and it worked, thanks!

It seems the issue was that the service-worker once got triggered by HMR didn't know which port to reload. If you go directly to the port instead of the popup, HMR worked normally.

[xiaoyvyv]

It works for me!

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {crx} from '@crxjs/vite-plugin'
import manifest from './manifest.json' assert {type: 'json'} // Node >=17

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        crx({manifest}),
    ],
    server: {
        strictPort: true,
        port: 5173,
        hmr: {
            clientPort: 5173
        }
    },
})

[wokalek]

It works for me!

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {crx} from '@crxjs/vite-plugin'
import manifest from './manifest.json' assert {type: 'json'} // Node >=17

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        crx({manifest}),
    ],
    server: {
        strictPort: true,
        port: 5173,
        hmr: {
            clientPort: 5173
        }
    },
})

thanks, it helped

[wong2]

Will this be fixed?

[mubaidr]

Yes, setting a fixed port for hmr and server is the solution.

[clickblipclick]

It's weird, setting the ports worked for a little bit for me, but then stopped working again. The service worker doesn't seem to reload.