Error: Dynamic require of "workbox-build" is not supported

[BernardoSM]

My local computer config that doesn't show the error below: ✅

• Operating System: Darwin
• Node Version: v20.9.0
• Nuxt Version: 3.10.2
• CLI Version: 3.10.1
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: ssr, spaLoadingTemplate, nitro, experimental, components, imports, app, build, sourcemap, dev, runtimeConfig, css, vite, postcss, modules, eslint, pwa
• Runtime Modules: @nuxtjs/eslint-module@^4.1.0, ./modules/auto-import-eslint.ts, @pinia/nuxt@^0.4.6, @pinia-plugin-persistedstate/nuxt@^1.0.0, @vite-pwa/[email protected]
• Build Modules:
• Vite: vite/5.1.1 darwin-arm64 node-v20.9.0

My gh actions config that shows the error below: 🚨

• Operating System: Linux
• Node Version: v20.9.0
• Nuxt Version: 3.10.2
• CLI Version: 3.10.1
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Error:  Dynamic require of "workbox-build" is not supported
  at /data/runners/one/_work/apps-monorepo/apps-monorepo/node_modules/vite-plugin-pwa/dist/chunk-UB6OAFZF.js:6:9
  at loadWorkboxBuild (/data/runners/one/_work/apps-monorepo/apps-monorepo/node_modules/vite-plugin-pwa/dist/index.js:300:12)
  at async Promise.all (index 0)
  at async generateInjectManifest (/data/runners/one/_work/apps-monorepo/apps-monorepo/node_modules/vite-plugin-pwa/dist/index.js:356:30)
  at async _generateSW (/data/runners/one/_work/apps-monorepo/apps-monorepo/node_modules/vite-plugin-pwa/dist/index.js:478:5)
  at async Object.generateSW (/data/runners/one/_work/apps-monorepo/apps-monorepo/node_modules/vite-plugin-pwa/dist/index.js:581:14)
  at async regeneratePWA (/data/runners/one/_work/apps-monorepo/apps-monorepo/node_modules/@vite-pwa/nuxt/dist/module.mjs:108:3)
  at async /data/runners/one/_work/apps-monorepo/apps-monorepo/node_modules/@vite-pwa/nuxt/dist/module.mjs:291:11
  at async /data/runners/one/_work/apps-monorepo/apps-monorepo/node_modules/nuxt/dist/index.mjs:3295:7
  at async build (/data/runners/one/_work/apps-monorepo/apps-monorepo/node_modules/nitropack/dist/shared/nitro.4ea992bc.mjs:2334:3) 

Error:  Dynamic require of "workbox-build" is not supported
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error:  command finished with error: command (/data/runners/one/_work/apps-monorepo/apps-monorepo/apps/pay) /tmp/yarn--1708439830980-0.8439479944659141/yarn run build exited (1)
Error: pay#build: command (/data/runners/one/_work/apps-monorepo/apps-monorepo/apps/pay) /tmp/yarn--1708439830980-0.8439479944659141/yarn run build exited (1)

[BernardoSM]

Hi guys, I have updates. I updated my github runner to macos-14 and isn't showing the error anymore. The bad part is that we can't use macos-14, we have a self hosted runner that works on ubuntu-latest, so we need to get this fix for ubuntu.

GH Action on macos-14 that doesn't show the error:

• Operating System: Darwin
• Node Version: v20.9.0
• Nuxt Version: 3.10.2
• CLI Version: 3.10.1
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

[buddh4]

I could fix this issue by adding "workbox-build": "^7.1.0" to my devDependencies.

[hansfuchs]

I've got the same issue when trying to build inside a nuxt application on Vercel, even with "workbox-build": "^7.1.0" in my devDependencies. Any updates on this? Has anyone got it to run on Vercel?

[thatandromeda]

I'm having this issue now, building both locally (OS X 14.4) and on a gitlab runner (with the node:20-alpine image). I presume it's related to

vite-plugin-pwa/src/modules.ts

Line 19 in f7f3147

const workbox = await import('workbox-build')

.
(When this line fails, the try/catch block kicks over into a require statement that presumably is throwing the error.)

Unfortunately this is preventing us from being able to upgrade nuxt/devtools to deal with a CVE, so it's an important problem that we will need to revisit shortly. The workbox-build fix did not work for us either.

[JarvisH]

I had the same issue, deleting the node_modules folder and reinstalling fixed it for me.

[ciao-chung]

Any body can fix this issue?
I have same problem on gitlab ci too.
And I also lock "workbox-build" version at 7.1.1
But still not work

[hyoban]

I added two patches to make it build correctly on vercel.

diff --git a/dist/index.js b/dist/index.js
index 147595f4a60b83ffa7316ed2c99be688e95f9fbd..74da4b11aba6a5b2d5e12bbfcf55da56015767ba 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -17,6 +17,10 @@ import {
 import { readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+
+import { createRequire } from 'node:module';
+const require = createRequire(import.meta.url);
+
 function createContext(userOptions) {
   const _dirname2 = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
   const { version } = JSON.parse(
@@ -276,8 +280,8 @@ import.meta.hot.on('${DEV_PWA_ASSETS_NAME}', ({ themeColor, links }) => {
       else link.removeAttribute('type');
       if (!link.parentNode) document.head.appendChild(link);
     });
-  }  
-});  
+  }
+});
 function registerDevSW() {
   try {
     import.meta.hot.send('${DEV_READY_NAME}');
@@ -303,7 +307,7 @@ async function loadWorkboxBuild() {
     const workbox = await import("workbox-build");
     return workbox.default ?? workbox;
   } catch (_) {
-    return __require("workbox-build");
+    return require("workbox-build");
   }
 }
 async function generateRegisterSW2(options, mode, source = "register") {

The first one is to solve that the output code of esbuild on vercel cannot require workbox-build. See evanw/esbuild#1921.

diff --git a/package.json b/package.json
index a832ba9fc48f08300d8e5e595409c0488217af86..23af6ad8e16a8add0580151e8124f71451ebfc94 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,8 @@
   "engines": {
     "node": ">=0.10.0"
   },
-  "main": "./jsonpointer",
-  "typings": "jsonpointer.d.ts",
+  "main": "./jsonpointer.js",
+  "typings": "./jsonpointer.d.ts",
   "files": [
     "jsonpointer.js",
     "jsonpointer.d.ts"

The second one is to require jsonpointer correctly

vite-plugin-pwa 0.20.5
└─┬ workbox-build 7.3.0 peer
  └─┬ @apideck/better-ajv-errors 0.3.6
    └── jsonpointer 5.0.1

[userquin]

@hyoban can you check with pkg-pr-new version from this PR #781 (comment) ?

[hyoban]

There is no problem with vite-plugin-pwa now, but it seems that jsonpointer still needs to be patched. I'll try to send a PR there.

[userquin]

@BernardoSM @hyoban released v0.21.0