Module not found after uniapp build as h5 version

[censujiang]

Error report details

Uncaught (in promise) TypeError: Failed to resolve module specifier '..-node_modules-.pnpm-workbox-window@7.0.0-node_modules-workbox-window-build-workbox-window.prod.es5.1e1a3f8e.js'
    at index-487d5823.js:6:86496
    at t (index-487d5823.js:1:762)
    at index-487d5823.js:6:86489
    at u.immediate (index-487d5823.js:6:86942)
    at jh (index-487d5823.js:6:86968)
    at index-487d5823.js:6:87685
    at Dn (index-487d5823.js:1:19096)
    at Un (index-487d5823.js:1:19174)
    at t.__weh.t.__weh (index-487d5823.js:1:33192)
    at Y (index-487d5823.js:1:4319)

Reproduction example

https://github.com/censujiang/vite-plugin-pwa-with-uniapp-test https://stackblitz.com/github/censujiang/vite-plugin-pwa-with-uniapp-test

Reproduction method

In the provided sample project, execute the commands in order, and you can find the problem and report the error in the opened browser window.

pnpm i
pnpm run build
pnpm run preview

[userquin]

add workbox-window to your dev dependencies

[censujiang]

add workbox-window to your dev dependencies

I tried it, but the problem remains. The latest modifications have been submitted to the sample repository.

[userquin]

Try using dynamic import inside launch instead static import here: https://github.com/censujiang/vite-plugin-pwa-with-uniapp-test/blob/main/src/App.vue#L4C53-L4C56

Why are you registering the sw twice (the virtual will register the sw: https://github.com/censujiang/vite-plugin-pwa-with-uniapp-test/blob/main/src/App.vue#L8)?

Anyway, I haven't checked what's doing onLaunch, you should only call pwa virtual on client side: https://vite-pwa-org.netlify.app/guide/faq.html#vite-pwa-virtual-module

[censujiang]

1. I will try it.
2. You mean I just need to register manually and set the relevant options?
3. onLaunch is a function triggered when starting in the life cycle of uniapp

[userquin]

You mean I just need to register manually and set the relevant options?

Remove virtual pwa call (and static import) and register the sw yourself: https://vite-pwa-org.netlify.app/guide/service-worker-without-pwa-capabilities.html#registering-of-the-service-worker-in-your-app

[censujiang]

Regarding question 1, this method is useless. The specific error is as follows

TypeError: Failed to resolve module specifier '..-..-..-..-@vite-plugin-pwa-virtual:pwa-register-vue.eca0a462.js'
    at index-14fb415a.js:6:86683
    at t (index-14fb415a.js:1:762)
    at index-14fb415a.js:6:86676
    at Dn (index-14fb415a.js:1:19096)
    at Un (index-14fb415a.js:1:19174)
    at t.__weh.t.__weh (index-14fb415a.js:1:33192)
    at Y (index-14fb415a.js:1:4319)
    at n (index-14fb415a.js:6:87275)

[censujiang]

You mean I just need to register manually and set the relevant options?

Remove virtual pwa call (and static import) and register the sw yourself: https://vite-pwa-org.netlify.app/guide/service-worker-without-pwa-capabilities.html#registering-of-the-service-worker-in-your-app

This method is currently valid in HTTPS connections with valid SSL certificates, which means that currently for uniapp, we can only register and manage it manually?

[userquin]

Weird, this is the code in the entry point:

        const {useRegisterSW: e} = await t((()=>import("..-..-..-..-@vite-plugin-pwa-virtual:pwa-register-vue.911fca92.js")), [], import.meta.url);

[userquin]

Using your SB playground and registering the sw manually seems to work: https://stackblitz.com/edit/github-rzyq4b?file=src%2FApp.vue

[censujiang]

Weird, this is the code in the entry point:

       const {useRegisterSW: e} = await t((()=>import("..-..-..-..-@vite-plugin-pwa-virtual:pwa-register-vue.911fca92.js")), [], import.meta.url);

Yes, I also feel very strange. Do you think it is a problem with your automatic registration strategy, Vite's packaging problem, or a problem with uniapp itself?

[userquin]

No idea, I'll check your repo later on my local

[censujiang]

Latest news: My friend gave me feedback that there was no problem with the 0.12.3 version of the plug-in used in his project, but the situation I reported appeared when he switched to 0.12.8 and later versions.

[userquin]

I tried on my local using latest next version (3.0.0-alpha-4000020231227002) but still not working, enabling Vite log (logLevel: 'info') same result, ..-..-..-..-@vite-plugin-pwa-virtual:pwa-register-vue.20ccab0d.js is empty:

[userquin]

In fact, the file is there but without extension (: is invalid in Window FS):

[censujiang]

This is really a wonderful thing. It should be a problem of packaging policy control.

[userquin]

If @dcloudio/vite-plugin-uni is relying on plugins position, it is wrong, Vite 3/4 included that change in 3.1 IIRC, check https://github.com/vitejs/vite/discussions/13175 (pwa build plugin using sequential: https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/plugins/build.ts#L36-L43)

NOTE: that shouldn't be a problem since the sw seems to be generated properly

[censujiang]

If @dcloudio/vite-plugin-uni is relying on plugins position, it is wrong, Vite 3/4 included that change in 3.1 IIRC, check vitejs/vite#13175 (pwa build plugin using sequential: https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/plugins/build.ts#L36-L43)

In other words, uniapp has changed the behavior of vite, but there is no good back compatibility. If this is determined, I need to feedback this problem to the project team of uniapp

[censujiang]

If @dcloudio/vite-plugin-uni is relying on plugins position, it is wrong, Vite 3/4 included that change in 3.1 IIRC, check vitejs/vite#13175 (pwa build plugin using sequential: https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/plugins/build.ts#L36-L43)

NOTE: that shouldn't be a problem since the sw seems to be generated properly

I just took a look at your latest modification. Is there a problem with file name generation?

[userquin]

On Windows fs you cannot use : in the name (iirc in any fs).

[censujiang]

I would like to ask a question, in manual injection mode, is it possible to implement page reloading (window.location.reload()) without importing a virtual module? The mention in the document makes me a little vague.

https://vite-pwa-org.netlify.app/guide/auto-update.html#automatic-reload

[userquin]

Don't remove refreshing flag, if you're testing it via Chrome Dev Tools Update on Reload button:

let refreshing;
navigator.serviceWorker.addEventListener('controllerchange',
  function() {
    if (refreshing) return;
    refreshing = true;
    window.location.reload();
  }
);