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)

Most upvoted comments

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 my next.config.js

I 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 my next.config.js solved 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 my next.config.js looks 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.

I can confirm that downgrading webpack from 5.17.0 to 4.46.0 in my project “fixed” the issue.

Thank you so much.