Next-pwa: next js run dev and run build failed with version next-pwa > 5.0.0

[sugar3103]

What version of Next.js are you using?
latest 10.0.1

What version of Node.js are you using?
14.15.1

What browser are you using?
Chrome

What operating system are you using?
Ubuntu

I have upgrade the packages version to latest :
"dependencies": {
"next": "latest",
"next-pwa": "^5.0.5",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"sass": "^1.32.6",
"webpack": "^5.19.0"
}
after i updated them npm run dev or yarn run dev show these error :

[PWA] Compile server

Build error occurred
TypeError: Cannot read property 'tapPromise' of undefined
at /home/sugar/g1-fe-nextjs/node_modules/workbox-webpack-plugin/build/generate-sw.js:242:41
at SyncHook.eval [as call] (eval at create (/home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:47168:10), :9:1)
at SyncHook.lazyCompileHook (/home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
at Compiler.newCompilation (/home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:56889:30)
at /home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:56926:29
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
at Compiler.compile (/home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:56921:28)
at /home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:56580:11
at Compiler.readRecords (/home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:56788:11)
at /home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:56577:10
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
at /home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:56574:19
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), :15:1)
at AsyncSeriesHook.lazyCompileHook (/home/sugar/g1-fe-nextjs/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)

[shadowwalker]

This is a know issue with workbox-webpack-plugin, can you try the following before build:

yarn remove webpack
yarn add -D webpack@webpack-4

[vendramini]

I'm facing the same problem. Adding webpack does solve the problem, but it's creating another one to me: now webpack says that it can't compile svg's because there's no loader for that.

Should I have a completely custom webpack to be able to use with next >= 10.0.6?

[sugar3103]

This is a know issue with workbox-webpack-plugin, can you try the following before build:

yarn remove webpack
yarn add -D webpack@webpack-4

Hi @shadowwalker , i have tested it with your suggestion, the compiler compile with no error but the service worker is not working when i Ctrl+C to stop the yarn run dev script.
Enviroment :
"dependencies": {
"next": "^10.0.6",
"next-pwa": "^5.0.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^4.46.0"
}
Step to reproduce :
yarn
yarn run dev -> (localhost:3000 working with no problem)
Ctrl+C
localhost:3000 showing "This site can't be reached"

expected bahaviour:
yarn
yarn run dev -> (localhost:3000 working with no problem)
Ctrl+C
localhost:3000 working with cached content

[LucasMallmann]

@sugar3103 Are you using the default runtime caching in your next.config file?

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    runtimeCaching,
  },
});

[shadowwalker]

@LucasMallmann a tip here: manually assign runtimeCaching should not be needed, I have fixed that bug.

@sugar3103 full offline caching in develop mode is not supported by design. If you try yarn start instead of yarn dev, your use case should work as you expected. You shouldn't worry about full offline in develop mode after that, once it's working, it will work in production environment.

[sugar3103]

@sugar3103 Are you using the default runtime caching in your next.config file?

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    runtimeCaching,
  },
});

yes i am pretty sure i did enabled the runtimeCaching as i did clone the source from this github and run it in the folder next-pwa/examples/next-9.

@LucasMallmann a tip here: manually assign runtimeCaching should not be needed, I have fixed that bug.

@sugar3103 full offline caching in develop mode is not supported by design. If you try yarn start instead of yarn dev, your use case should work as you expected. You shouldn't worry about full offline in develop mode after that, once it's working, it will work in production environment.

yep it work as you mentioned in development mode. so this is not a bug at all.
I will close the issue.
Thank you guys for your great supports,

[vendramini]

I'm facing the same problem. Adding webpack does solve the problem, but it's creating another one to me: now webpack says that it can't compile svg's because there's no loader for that.

Should I have a completely custom webpack to be able to use with next >= 10.0.6?

@shadowwalker is my comment right? I'm afraid because I can't upgrade next because of that.

[shadowwalker]

@vendramini latest next.js should work for you now.