Next-pwa: Error while building the next-9 example

[vishwasnavadak]

Issue

Error while trying to install and build the example for installing next-pwa on Next v9+ .

Expected Output

Successful Build with PWA ready Next App

Steps

• Fork the repo - https://github.com/shadowwalker/next-pwa/tree/master/examples/next-9
• Run npm install
• Run npm run build
• Build fails with below error

> [email protected] build /<dir>/next-9
> next build

> [PWA] compile client (static)
> [PWA] auto register service worker with: /<dir>t/next-9/node_modules/next-pwa/register.js
> [PWA] service worker: /<dir>/next-9/public/sw.js
> [PWA]   url: /sw.js
> [PWA]   scope: /
> [PWA] precache manifest: /<dir>/next-9/public/precache.ykumYKjvIaxEuyzC-fB1q.[manifestHash].js
> [PWA] compile server
Creating an optimized production build

Failed to compile.

Please check your GenerateSW plugin configuration:
"importsDirectory" is not a supported parameter.. "globDirectory" is not a supported parameter.. "globPatterns" is not a supported parameter.. "precacheManifestFilename" is not a supported parameter.

> Build error occurred
Error: > Build failed because of webpack errors
    at build (/<dir>/next-9/node_modules/next/dist/build/index.js:10:900)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /<dir>/.npm/_logs/2020-02-08T13_39_59_180Z-debug.log

[shadowwalker]

I will check this. Thanks for create this issue.

[shadowwalker]

@vishwasnavadak Hi, reproduce confirmed. This is due to an update to 5.0 in workbox, they deprecated some parameters and caused this breaking change. If this is important to you, please use next-pwa v2.0.2 for now. I will investigate if there is a good fix I can do.

[vishwasnavadak]

@shadowwalker Sure will do. Thanks for the help

[shadowwalker]

@vishwasnavadak Hi, I just finished the fix. Could you try out the latest change? next-pwa v2.1.1 should be working as expected.

[vishwasnavadak]

@shadowwalker That was a very quick fix. It works !!

Thank you!

[AkshayCloudAnalogy]

@shadowwalker Same issue is arising with v2.40
Here is the error:

yarn run v1.21.1
$ next build
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: <dir>\next-pwa\examples\next-9\node_modules\next-pwa\register.js
> [PWA] Service worker:<dir>\next-pwa\examples\next-9\public\sw.js
> [PWA]   url: \sw.js
> [PWA]   scope: \
> [PWA] Compile server
Creating an optimized production build  

Failed to compile.

chunk static/runtime/main.js [initial]
static/runtime/main-e2f6bbe4483af32f35ee.js
<dir>\next-pwa\examples\next-9\node_modules\next-pwa\register.js c41b81e2b7b93250b27effc664089e9b
Unterminated string constant (4:89)
|
| if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
|   window.workbox = new __WEBPACK_MODULE_REFERENCE__0_576f726b626f78__("\sw.js", { scope: "\" })
|   if(true) window.workbox.register()
| }


> Build error occurred
Error: > Build failed because of webpack errors
    at build (<dir>\next-pwa\examples\next-9\node_modules\next\dist\build\index.js:13:900)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[AkshayCloudAnalogy]

Here is the error as it is not escaping \ if no scope is defined:

window.workbox = new workbox_window__WEBPACK_IMPORTED_MODULE_0__["Workbox"]("\sw.js", { scope: "\" }) <--- Here is error

[shadowwalker]

Fixed with commit
https://github.com/shadowwalker/next-pwa/commit/fc16e390a3b7fe67d9bdb288e977be6d19c69fbf