Next-pwa: Error on build "TypeError: Cannot read property 'tapPromise' of undefined"

[flayks]

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' },
            ],
        }]
    },
}

[shadowwalker]

Could you create a minimal error reproduce repo?

[laurensnl]

Same error here on [email protected], [email protected] and [email protected]. No custom worker and no custom config. Did you find a solution @flayks?

[flayks]

@laurensnl Unfortunately no, and @shadowwalker I can't really give a reproducible repo or example as I don't know where this error comes from / my project is too big to be shared. I switched to next-offline in the meantime 🙈

[laurensnl]

Thanks, I'll check out next-offline

[thomasvaeth]

@shadowwalker I filed #138 before seeing this. I am getting the same error in the Next-9 example in this repo.

[ericvera]

I was having the same issue. Removing the webpack (5.*) dependency fixed the issue.

[madrus]

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

[flayks]

@shadowwalker It seems to be that next-pwa is not totally optimized with Webpack 5 then

[shadowwalker]

@flayks I will try to take a look and fix this issue

[am2222]

confirm, it is not working with webpack >=5.0.0

[sl-julienamblard]

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

[am2222]

Actually when I installed this package it mentiones that it works with webpack<=5 and >4.0.?? (I cannot remember the exact version) But in my case I used webpack 5.0.0 and it did not work. I will try your solution

[saifbechan]

@sl-julienamblard I can confirm adding future: { webpack5: true } in my next.config.js solved the problem for me.

[ericvera]

I now just get a warning with webpack 5.22, but it works with @saifbechan suggestion.

➤ YN0060: │ hosting@workspace:. provides webpack (p88a2d) with version 5.22.0, which doesn't satisfy what next-pwa and some of its descendants request

...perhaps this should just be a new issue.

[GustavoNapa]

Consegui instalando o webpack na versão 4.44.1 e funcionou, carregou o Service Worker testado ok.

[komen205]

module.exports = withPWA({ future: { webpack5: true }, pwa: { dest: "public", runtimeCaching, }, });
This is how my next.config.js looks like

[otisidev]

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

Thank you so much.