Next-pwa: Unable to build project that includes a custom worker file

[SamuelQuinones]

Summary

Whenever I try to build a next-pwa project that includes a custom worker js file, the build fails with the following error:

info  - Creating an optimized production build ..buffer.js:333
  throw new ERR_INVALID_ARG_TYPE(
  ^

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined
    at Function.from (buffer.js:333:9)
    at writeOut (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:56716:26)
    at C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:56735:7
    at arrayIterator (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\neo-async\async.js:1:14270)
    at timesSync (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\neo-async\async.js:1:5037)
    at Object.eachLimit (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\neo-async\async.js:1:14216)
    at emitFiles (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:56617:13)
    at C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:36508:26
    at FSReqCallback.oncomplete (fs.js:184:5) {
  code: 'ERR_INVALID_ARG_TYPE'
}

How To Reproduce

run build with a custom worker worker/index.js

Additional Context

This also happens with any of the examples that include a custom worker as well, I pulled the repo and tried to build:

• Custom worker
• cache on front end
• web push

and was met with the same error

I am attempting to build on a windows 10 machine using node 14.15.1 and npm 6.14.8

I can provide additional info if needed, I saw that there was a similar issue to this one in #167

[arso1er]

I'm facing the same issue.

[Coac]

I get the same error using the next-pwa/examples/custom-worker example

[lukasknutti]

has one of you found the solution to this problem? @Coac @arso1er @SamuelQuinones

[SamuelQuinones]

has one of you found the solution to this problem? @Coac @arso1er @SamuelQuinones

Not as of yet, I've had to stop development on the project in question until we can find a solution

[lukasknutti]

@shadowwalker this issue is making it hard for a lot of people to use this package to its full capacity. Would you mind taking a look at this issue?

[lukasknutti]

@SamuelQuinones @Coac @arso1er i asked a question regarding this issue on SO - i got an answer that did the trick for me. -> https://stackoverflow.com/a/66819979/11344840

[SamuelQuinones]

@SamuelQuinones @Coac @arso1er i asked a question regarding this issue on SO - i got an answer that did the trick for me. -> https://stackoverflow.com/a/66819979/11344840

So this DID solve the problem for me which was great! HOWEVER something to note is that this solution does NOT work with the new version of NextJS that came out today.

[felixmosh]

I've opened a bug in Next.js repo https://github.com/vercel/next.js/issues/23528

[arso1er]

Hi all. Could someone please make a working version repo? I'm still getting an error.

Thanks.

[shadowwalker]

I finally got something working, please try next-pwa 5.1.3

[arso1er]

@shadowwalker Thanks for the update. But now, I get the following error :
> Build error occurred
Error: Cannot find module 'terser-webpack-plugin'.

Edit: I manually installed terser-webpack-plugin, added future webpack 5 to next config and it worked. Thanks again for your hard work.

[shadowwalker]

terser-webpack-plugin should be there if you are using latest next.js, otherwise, feel free to add it.

[SamuelQuinones]

Im on the latest nextjs, and im getting that same missing terser-webpack-plugin error
I even reset my lock file to be 100% sure

EDIT: Adding the terser-webpack-plugin as a dev dependency seems to do the trick, a bit odd that it wasn't already there but everything seems to work so im happy to call this solved :)

[einSelbst]

It might be the case that an explicit opt-in into webpack 5 is needed, see https://nextjs.org/docs/messages/webpack5

in my build logs was output a la:

info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5

I haven't seen that output before so maybe it's a next 10.1.x thing

So in next.config.js add:

module.exports = {
  future: {
    webpack5: true,
  },
}

so next.js will use webpack 5 which has the terser-webpack-plugin included as expected by next-pwa.