[Bug] `injectManifest`. `dev` mode doesn't apply any `plugins`; `prod` does

[o-alexandrov]

Related links

• defaultInjectManifestVitePlugins
  • this list of plugins is applied in prod, but not dev, resulting in completely different output (unrelated to minification) in dev/prod for some users of vite-plugin-pwa, making it dangerous to rely on dev mode
• https://github.com/vite-pwa/vite-plugin-pwa/issues/260

Why not using vite's plugins in dev mode is dangerous

By not applying any vite plugins, the service worker cannot reuse all these plugins' configurations that a user might have in own vite.config.ts, for example:

• define w/ variables replacement (using import.meta.env.* is not a sufficient alternative, as you can't replace values from the code you don't manage by using import.meta.env.*)
• esbuild plugin's target setting, or jsx
• resolve w/ pointers for different libraries, ex. lodash & lodash-es

Reproducible example

• refer to a demo repo here

Click to see code snippets from the demo repo above

```ts // src/index.ts - entry file for index.html if (`serviceWorker` in navigator) { void navigator.serviceWorker.register( import.meta.env.MODE === `production` ? `/sw.js` : `/dev-sw.js?dev-sw`, { type: import.meta.env.MODE === `production` ? `classic` : `module` } ); } ``` ```ts // src/sw.ts - service worker /// declare let self: ServiceWorkerGlobalScope; import { precacheAndRoute } from "workbox-precaching"; /** * @example 2 */ //// @ts-expect-error "is-equal" is aliased to "fast-deep-equal" in vite.config.ts // import { value } from "@/example-for-alias"; self.addEventListener(`install`, () => self.skipWaiting()); self.addEventListener(`activate`, () => self.clients.claim()); precacheAndRoute(self.__WB_MANIFEST); // @WARNING "build" won't work without it console.info("Hello from Service Worker!"); /** * @example 1 * Uncomment to raise a bug in dev, but not in prod */ // const a = window; // const b = typeof a === "object"; // console.info("This statement should show 'true': ", b); /** * @example 2 * Uncomment to raise a bug in dev, but not in prod */ // console.info("This statement should show 'true': ", value); ``` ```ts // vite.config.ts import { defineConfig } from "vite"; import { VitePWA } from "vite-plugin-pwa"; export default defineConfig({ define: { window: {}, }, resolve: { alias: { "@": new URL("./src", import.meta.url).pathname, }, }, plugins: [ VitePWA({ srcDir: "./src", filename: `sw.ts`, strategies: `injectManifest`, injectRegister: false, // we register the service worker ourselves devOptions: { enabled: true, type: `module` }, }), ], }); ```

Alternative plugins or how to overcome this issue

It's possible to use vite-plugin-native-sw that has working dev & prod modes

• it's just less popular and doesn't have other features vite-plugin-pwa has

[userquin]

@o-alexandrov I'm missing with this issue: enabling devOptions, just registers a Vite plugin for dev, any plugin can apply any transformation to the custom sw, on closed issue I show you a custom SW using import.meta.env (define is not just a plugin https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/define.ts ?).

[userquin]

@o-alexandrov on dev it works:

[o-alexandrov]

@userquin

on closed issue I show you a custom SW using import.meta.env

In that issue I asked: how would you use import.meta.env to modify code you don't manage? (ex. that comes from dependencies; and obviously it's impossible w/ import.meta.env.*, this question is just to draw attention to such case)

• added example 1 in sw.ts of the reproducible example

---

Added a repo that showcases a couple of possible scenarios when this issue becomes a bug for a user:

• examples for a scenario w/ resolve option and a separate example for define option
  • npm run start to run dev mode, and npm run start:prod to run in prod mode after build

[o-alexandrov]

It's worth noting:

• this issue happens only for injectManifest scenario
  • when vite-plugin-pwa registers itself (i.e. generateSW strategy), it does apply vite's plugins

[userquin]

@o-alexandrov can you send a PR with your proposal?

I guess we need to add:

• include vite stuff on custom sw on dev plugin: https://github.com/sxyazi/vite-plugin-native-sw/blob/main/src/index.ts#L153
• allow configure custom rollup build plugins for injectManifest strategy

[o-alexandrov]

Thank you for supporting this change. I'll create a PR in the next few days then based on the points you shared

[o-alexandrov]

I’m sorry, I can’t dedicate to this task anymore as requirements changed at my work. Closing this issue to not pollute the list of open issues here.

[shikaan]

Is this work being picked up anytime soon? Are there workarounds?

[userquin]

https://github.com/vite-pwa/vite-plugin-pwa/pull/506

[o-alexandrov]

@userquin This issue has nothing to do with #506, as #506 doesn't have any changes to the dev mode, does it? generateInjectManifest isn't used in dev mode, so no vite plugins are applied.

When I tried to use vite-plugin-pwa@0.15.0, process.env.CUSTOM_VALUE is still undefined when running locally, meaning dev mode still doesn't use any plugins & define from vite config.

---

506, afaik, is a consistency fix for the build mode, while making no changes to the dev

[userquin]

So, now the problem is in dev mode, I Will check your repo and try to fix it.

[userquin]

The new custom sw build has been included to fix vitepress builds, since pwa plugin was creating weird sw code. Same problem with sveltekit integration (now sveltekit build the sw).

Can you duplicate plugins in app and pwa options?