[SOLVED] Unable to build project that includes a custom worker file

Unable to build project that includes a custom worker file

I'm facing a very strange issue with next-pwa. 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'
}

I have tried several things so far to fix this issue:

Clone the repo and updated all dependencies (i thought the issue might be webpack related)
Building the project without a custom worker file (works fine)
Downgrade to Node 10, 12, 14, 15, and re-install dependencies.

I've also tried the to use the code provided in the /example folder of the repo, but the same issue occurs there as well.

I'm not the only one facing this issue so i would appreciate help.

You can test it yourself using Gitpod, just open this link and navigate to the example, install dependencies and try yarn build.

Solution

Are you using webpack 5 or 4.x? I faced the same issue with webpack > 5 and fixed the same by passing the future object to withPWA " future: { webpack5: true }".

module.exports = withPWA({ future: { webpack5: true },
pwa: {
    disable: false,
    dest: "public",
    //register: false,
    skipWaiting: false,
    runtimeCaching
}

})