Next-pwa: Examples Next-9

[thomasvaeth]

README links to examples/next-9 to see usage without custom server in action, but the example isn't working.

Build error occurred
TypeError: Cannot read property 'tapPromise' of undefined
    at /Users/thomasvaeth/next-pwa/examples/next-9/node_modules/workbox-webpack-plugin/build/generate-sw.js:242:41

I am having a problem getting next-pwa to work in my project, so I tried to look at the example to see what I was doing wrong. If I manually put sw.js and workbox-*.js in the public directory, then it works but I was expecting it to work just by dest: public in the next.config.js.

[shadowwalker]

I couldn't reproduce this error. Could you try remove yarn.lock, node_modules, .next, then try run yarn install and yarn build again? Maybe that would help resolve the issue.

[shadowwalker]

Tried on both latest Windows 10 OS and GitPod environment below, still couldn't reproduce the error.

gitpod /workspace/next-pwa/examples/next-9 $ uname -a
Linux ws-80d5940a-4b14-4eef-a861-cb07d1c97ff3 5.4.0-1024-gcp #24~18.04.1-Ubuntu SMP Sun Sep 6 03:37:03 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

[ericvera]

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

[shadowwalker]

@ericvera Can you elaborate a bit? I cannot reproduce this error.

[ericvera]

[email protected] has a reference to [email protected]. NextJS published a blog a while back about supporting webpack@5 so I used yarn add webpack. After I add webpack yarn list webpack shows the following results (see the 2 versions of webpack):

user@Machine-Name hosting % yarn list webpack yarn list v1.22.10 warning Filtering by arguments is deprecated. Please use the pattern option instead. ├─ [email protected] │ └─ [email protected] └─ [email protected] ✨ Done in 0.28s.

If I try to build (`next build && next export) in this state I get the following:

````
yarn run v1.22.10
$ yarn build:clean && next build && next export
$ (rm -rf .next || true) && (rm -rd out || true)
Version: 2021.01.19-16.10

[PWA] Compile client (static)
[PWA] Auto register service worker is disabled, please call following code in componentDidMount callback or useEffect hook
[PWA] window.workbox.register()
[PWA] Service worker: /Users/user/Code/project/hosting/public/sw.js
[PWA] url: /sw.js
[PWA] scope: /
[PWA] Compile server

Build error occurred
TypeError: Cannot read property 'tapPromise' of undefined
at /Users/user/Code/project/hosting/node_modules/workbox-webpack-plugin/build/generate-sw.js:242:41
at SyncHook.eval [as call] (eval at create (/Users/user/Code/project/hosting/node_modules/tapable/lib/HookCodeFactory.js:19:10), :9:1)
at SyncHook.lazyCompileHook (/Users/user/Code/project/hosting/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.newCompilation (/Users/user/Code/project/hosting/node_modules/next/node_modules/webpack/lib/Compiler.js:630:30)
at /Users/user/Code/project/hosting/node_modules/next/node_modules/webpack/lib/Compiler.js:667:29
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Code/project/hosting/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/user/Code/project/hosting/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.compile (/Users/user/Code/project/hosting/node_modules/next/node_modules/webpack/lib/Compiler.js:662:28)
at /Users/user/Code/project/hosting/node_modules/next/node_modules/webpack/lib/Compiler.js:321:11
at Compiler.readRecords (/Users/user/Code/project/hosting/node_modules/next/node_modules/webpack/lib/Compiler.js:529:11)
at /Users/user/Code/project/hosting/node_modules/next/node_modules/webpack/lib/Compiler.js:318:10
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Code/project/hosting/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/user/Code/project/hosting/node_modules/tapable/lib/Hook.js:154:20)
at /Users/user/Code/project/hosting/node_modules/next/node_modules/webpack/lib/Compiler.js:315:19
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Code/project/hosting/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
at AsyncSeriesHook.lazyCompileHook (/Users/user/Code/project/hosting/node_modules/tapable/lib/Hook.js:154:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
user@Machine-Name hosting %
````

If I yarn remove webpack then it builds fine.

[MPCL5]

README links to examples/next-9 to see usage without custom server in action, but the example isn't working.

Build error occurred
TypeError: Cannot read property 'tapPromise' of undefined
    at /Users/thomasvaeth/next-pwa/examples/next-9/node_modules/workbox-webpack-plugin/build/generate-sw.js:242:41

I am having a problem getting next-pwa to work in my project, so I tried to look at the example to see what I was doing wrong. If I manually put sw.js and workbox-*.js in the public directory, then it works but I was expecting it to work just by dest: public in the next.config.js.

I fixed this by installing version 4.46.0 of webpack.
you can do it by running this command: npm i [email protected] --save