next-pwa: Error on build "TypeError: Cannot read property 'tapPromise' of undefined"
I get that error when building since using Webpack 5 and Next.js 10:
> yarn build
yarn run v1.22.10
$ NODE_ENV=production next build
Loaded env from /Users/flayks/sites/atelier-m/.env.local
(node:18901) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] DeprecationWarning: SingleEntryPlugin was renamed to EntryPlugin
(Use `node --trace-deprecation ...` to show where the warning was created)
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: /Users/flayks/sites/atelier-m/node_modules/next-pwa/register.js
> [PWA] Service worker: /Users/flayks/sites/atelier-m/public/sw.js
> [PWA] url: /sw.js
> [PWA] scope: /
> [PWA] Compile server
> Build error occurred
TypeError: Cannot read property 'tapPromise' of undefined
at /Users/flayks/sites/atelier-m/node_modules/next-pwa/node_modules/workbox-webpack-plugin/build/generate-sw.js:242:41
at SyncHook.eval [as call] (eval at create (/Users/flayks/sites/atelier-m/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:9:1)
at SyncHook.lazyCompileHook (/Users/flayks/sites/atelier-m/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.newCompilation (/Users/flayks/sites/atelier-m/node_modules/next/node_modules/webpack/lib/Compiler.js:630:30)
at /Users/flayks/sites/atelier-m/node_modules/next/node_modules/webpack/lib/Compiler.js:667:29
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/flayks/sites/atelier-m/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/flayks/sites/atelier-m/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.compile (/Users/flayks/sites/atelier-m/node_modules/next/node_modules/webpack/lib/Compiler.js:662:28)
at /Users/flayks/sites/atelier-m/node_modules/next/node_modules/webpack/lib/Compiler.js:321:11
at Compiler.readRecords (/Users/flayks/sites/atelier-m/node_modules/next/node_modules/webpack/lib/Compiler.js:529:11)
at /Users/flayks/sites/atelier-m/node_modules/next/node_modules/webpack/lib/Compiler.js:318:10
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/flayks/sites/atelier-m/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/flayks/sites/atelier-m/node_modules/tapable/lib/Hook.js:154:20)
at /Users/flayks/sites/atelier-m/node_modules/next/node_modules/webpack/lib/Compiler.js:315:19
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/flayks/sites/atelier-m/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at AsyncSeriesHook.lazyCompileHook (/Users/flayks/sites/atelier-m/node_modules/tapable/lib/Hook.js:154:20)
error Command failed with exit code 1.
It builds fine when not using next-pwa
module.exports = config
or using next-offline
module.exports = withOffline(config)
The config:
const config = {
// Env
env: {
localesMap: {
fr: 'fr-fr',
en: 'en-us'
}
},
// Internationalization
i18n: {
locales: ['en', 'fr'],
defaultLocale: 'en'
},
// PWA options
pwa: {
disable: process.env.NODE_ENV === 'development',
dest: 'public'
},
// Headers
async headers() {
return [{
source: '/(.*)',
headers: [
{ key: 'X-Frame-Options', value: 'SAMEORIGIN', },
{ key: 'X-Content-Type-Options', value: 'nosniff' },
{ key: 'X-XSS-Protection', value: '1; mode=block' },
{ key: 'Strict-Transport-Security', value: 'max-age=31536000; includeSubDomains; preload' },
],
}]
},
}
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 7
- Comments: 17 (4 by maintainers)
Hi there, this is weird, I was facing the same issue, but I actually make it work by using webpack 5 by adding
future: { webpack5: true }in mynext.config.jsI can confirm that downgrading webpack from 5.17.0 to 4.46.0 in my project “fixed” the issue.
@sl-julienamblard I can confirm adding
future: { webpack5: true }in mynext.config.jssolved the problem for me.Same error here on next-pwa@5.0.3, next@10.0.5 and webpack@5.13.0. No custom worker and no custom config. Did you find a solution @flayks?
module.exports = withPWA({ future: { webpack5: true }, pwa: { dest: "public", runtimeCaching, }, });This is how mynext.config.jslooks like@flayks I will try to take a look and fix this issue
I was having the same issue. Removing the
webpack(5.*) dependency fixed the issue.Thank you so much.