crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.82k stars 187 forks source link

VITE > 4.3.0 HRM no starting #693

Open thyngster opened 1 year ago

thyngster commented 1 year ago

Build tool

Vite

Where do you see the problem?

Describe the bug

HRM_PORT is undefined, therefore the HRM doesn't work.

Reproduction

Just create a simple vite + crxjs project.

Created this repo for easing the testing task: https://github.com/thyngster/crxjs-vite430

image

Logs

Uncaught (in promise) DOMException: Failed to construct 'WebSocket': The URL 'ws://localhost:undefined/' is invalid.
    at setupWebSocket (chrome-extension://mljhkmdhnkpmoeeecfgjjmhfjhmmhjoo/@vite/client:245:20)
    at fallback (chrome-extension://mljhkmdhnkpmoeeecfgjjmhfjhmmhjoo/@vite/client:224:22)
    at WebSocket.<anonymous> (chrome-extension://mljhkmdhnkpmoeeecfgjjmhfjhmmhjoo/@vite/client:259:13)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12600K
    Memory: 15.50 GB / 31.81 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1555.0), Chromium (112.0.1722.34)
    Internet Explorer: 11.0.22621.1

Severity

annoyance

thyngster commented 1 year ago

These are the current generated client variables:

// use server configuration, then fallback to inference
const serverHost = "localhost:undefined/";
const socketProtocol = null || (importMetaUrl.protocol === 'https:' ? 'wss' : 'ws');
const hmrPort = null;
const socketHost = `${"localhost" || importMetaUrl.hostname}:${hmrPort || importMetaUrl.port}${"/"}`;
const directSocketHost = "localhost:undefined/";
const base = "/" || '/';
prakhartiwari0 commented 12 months ago

Same problem!

rusprice commented 10 months ago

Having this issue, using SvelteKit.