Webpack 5's Worker syntax stopped working with the Next.js 10.0.6 update

[paambaati]

What version of Next.js are you using?

10.0.6

What version of Node.js are you using?

15.7.0

What browser are you using?

Microsoft Edge for Mac

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

After moving to Webpack 5, I'd removed worker-plugin and started using the built-in Worker bundling — see GoogleChromeLabs/worker-plugin@049c3ca?short_path=b335630#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5

This worked fine until I upgraded Next.js from 10.0.5 to 10.0.6, when the page wouldn't compile and I saw this error —

error - ./pages/index.js 14:65
Module parse failed: Unexpected token (14:65)
File was processed with these loaders:
 * ./node_modules/@next/react-refresh-utils/loader.js
 * ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js
You may need an additional loader to handle the result of these loaders.
|   var workerRef = useRef();
|   useEffect(function () {
>     workerRef.current = new Worker(new URL('../worker.js', import.meta.url), {
|       type: 'module'
|     });

Expected Behavior

I expected web workers would continue working fine.

To Reproduce

1. Clone https://github.com/paambaati/nextjs-webpack-worker-bug-repro (which is a lightly modified version of https://github.com/vercel/next.js/tree/canary/examples/with-web-worker)

2. npm install and npm run dev

3. See this error on both the browser and console —

   wait  - compiling...
   error - ./pages/index.js 14:65
   Module parse failed: Unexpected token (14:65)
   File was processed with these loaders:
    * ./node_modules/@next/react-refresh-utils/loader.js
    * ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js
   You may need an additional loader to handle the result of these loaders.
   |   var workerRef = useRef();
   |   useEffect(function () {
   >     workerRef.current = new Worker(new URL('../worker.js', import.meta.url), {
   |       type: 'module'
   |     });
   

4. On downgrading to Next.js 10.0.5, this issue doesn't occur.

[timneutkens]

You're likely not using webpack 5. The resolutions no longer works as Next.js has webpack 4 + 5 inline now to allow for an easy opt-in in next.config.js:

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

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.