HMR on service worker

[userquin]

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

pnpm installed globally required and node 12+, I'm testing with node 15 via nvm: once cloned and checkout feat/add-development-support execute pnpm install && pnpm run build from 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.hot from examples/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 on src/dev.ts: the example on examples/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.1202

Used 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:118

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[userquin]

I fix packages/vite/src/client/overlay.ts and packages/vite/src/client/client.ts checking for typeof window, but it seems we cannot use dynamic imports on service workers (I think on web workers should work):

[userquin]

The link if someone interested: w3c/ServiceWorker#1356

[gotjoshua]

rwasm/vite-plugin-rsw#25 (comment)

[bluwy]

Related: #7163 and #2248

[kleisauke]

PR #9064 fixed for me the HTMLElement is not defined error with HMR on web workers. Perhaps that would also fix the issue on service workers?

[deathemperor]

PR #9064 fixed for me the HTMLElement is not defined error with HMR on web workers. Perhaps that would also fix the issue on service workers?

The issue is now with react-refresh (I think?)

@react-refresh:367 Uncaught ReferenceError: window is not defined
    at @react-refresh:367:1

which is this line

[alexturpin]

I am now hitting the issue with $RefreshReg$ as well, after updating Vite to fix the one with overlay.ts

trans-utils.tsx:5 Uncaught ReferenceError: $RefreshReg$ is not defined

My stack trace is on a random (the first in the dependency graph maybe?) bit of JSX.

Has anyone come up with a solution?

[cpojer]

The way to solve this is by adding a side-effectful module that you import before any other modules in your worker.

See initializeWorker.tsx and the example usage in a worker.

[ashleyww93]

PR #9064 fixed for me the HTMLElement is not defined error with HMR on web workers. Perhaps that would also fix the issue on service workers?

The issue is now with react-refresh (I think?)

@react-refresh:367 Uncaught ReferenceError: window is not defined
    at @react-refresh:367:1

which is this line

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.