HMR on service worker #5396
Comments
|
I fix
|
|
The link if someone interested: w3c/ServiceWorker#1356 |
This comment has been minimized.
This comment has been minimized.
patak-dev
added
enhancement
|
PR #9064 fixed for me the |
The issue is now with react-refresh (I think?) which is this line 
|
|
I am now hitting the issue with My stack trace is on a random (the first in the dependency graph maybe?) bit of JSX. Has anyone come up with a solution? |
|
The way to solve this is by adding a side-effectful module that you import before any other modules in your worker. |
I am still having this issue, after trying to migrate from rewired version of react create app. The fix by @cpojer alone did not work, I also had to disable the react plugin... which makes vite painful to use while developing a large project. How can Vite be so popular without having this right?! It seems to be due to random imports (which do not use jsx) which then, for whatever reason, bundles react-refresh with them. No HMR is sort of a dealbreaker on a large project like ours. |
@ashleyww93 Running into the same issue with a new SharedWorker I'm working on. Was worried it was due to some transitive import, which sounds likely. Also wondering if rolling back Vite a few versions would have any effect. |
We couldn’t find the import that causes this for us. We are importing this as a side effect and it’s now working well. https://gist.github.com/ashleyww93/12f8350ecc552c1d29ce93271147f325 |
Interesting, it's defined now, but thinks it's being loaded twice due to the presence of if (window.$RefreshReg$) {
throw new Error(
"React refresh runtime was loaded twice. Maybe you forgot the base path?"
);
}Assuming you aren't hitting that issue? I'm going to just try setting it to undefined or something falsey. |
Describe the bug
I'm trying to add HMR to a service worker, I don't know if I can do that, right now it is failing.
The sw code:
The client error:
The failing code:
Reproduction
Here the branch on my repo: https://github.com/userquin/vite-plugin-pwa/tree/feat/add-development-support
pnpminstalled globally required andnode 12+, I'm testing withnode 15vianvm: once cloned and checkoutfeat/add-development-supportexecutepnpm install && pnpm run buildfrom root folder.To run the sw example on dev, execute, also from root folder,
pnpm run example:dev:sw.Open the app in Chrome, it is registered with
type: 'module'.If you remove the
import.meta.hotfromexamples/vue-basic-inject-manifest/src/sw.ts, the service worker will work.The logic for the plugin can be found on
src/index.ts, search last plugin (name: 'vite-plugin-pwa:dev-sw'), the internal logic onsrc/dev.ts: the example onexamples/vue-basic-inject-manifest.System Info
System: OS: Windows 10 10.0.19042 CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz Memory: 49.51 GB / 63.95 GB Binaries: Node: 15.11.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD npm: 7.6.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 95.0.4638.54 Edge: Spartan (44.19041.1266.0), Chromium (94.0.992.50) Internet Explorer: 11.0.19041.1202Used Package Manager
pnpm
Logs
Since it is on client, here the logs on dev tools (see screenshots):
Uncaught ReferenceError: HTMLElement is not defined at overlay.ts:118Validations
The text was updated successfully, but these errors were encountered: