ReferenceError: regeneratorRuntime is not defined in next v10

[tar-aldev]

What version of Next.js are you using?

10.0.9

What version of Node.js are you using?

14.15.5

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

When using next js with react 16 I am getting

Uncaught ReferenceError: regeneratorRuntime is not defined
    at eval (webpack-internal:///../../node_modules/next/dist/next-server/lib/router/router.js:591)
    at eval (webpack-internal:///../../node_modules/next/dist/next-server/lib/router/router.js:961)
    at Object.eval (webpack-internal:///../../node_modules/next/dist/next-server/lib/router/router.js:1541)
    at eval (webpack-internal:///../../node_modules/next/dist/next-server/lib/router/router.js:1601)
    at Object.../../node_modules/next/dist/next-server/lib/router/router.js (main.js:871)
    at __webpack_require__ (webpack.js:873)
    at fn (webpack.js:151)
    at Object.eval (webpack-internal:///../../node_modules/next/dist/client/index.js:67)
    at eval (webpack-internal:///../../node_modules/next/dist/client/index.js:903)
    at Object.../../node_modules/next/dist/client/index.js (main.js:670)

I am using @nrwl/nx to setup react and next applications.
Here is an extract from my package.json and versions.
We migrated to next js 10, but react is at v16.

"dependencies": {
    "@babel/runtime": "^7.13.10",
    "core-js": "^3.6.5",
    "document-register-element": "1.13.1",
    "next": "10.0.9",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-router-dom": "5.2.0",
    "regenerator-runtime": "^0.13.7",
    "tslib": "^2.0.0"
  },

"devDependencies": {
    "@babel/core": "7.9.6",
    "@babel/preset-env": "7.9.6",
    "@babel/preset-react": "7.9.4",
    "@babel/preset-typescript": "7.9.0",
    "@nrwl/cli": "11.6.1",
    ...

You can notice that react app is working just fine while nextjs app crashes.

Expected Behavior

Nextjs app should work fine.
If there are some incompatible versions of next and react it should be noted somewhere in the docs. Some useful warnings in the console would be much appreciated.
(it is quite strange that reactjs can work with babel versions mentioned above, but nextjs fails to do so)

To Reproduce

create new workspace with nextjs
npx create-nx-workspace --preset=next
nx g @nrwl/react:application plain-react

Downgrade react and react-dom to 16.14.0

Here is a minimal repo where this issue can be seen
https://github.com/tar-aldev/regenerator-error-next

Just clone it run
npm i
npm run plain-react
npm run next-react

Go to localhost:4200 and you'll see blank screen and error in console
Go to localhost:3000 and you'll see react app is working fine

[alecwhittington]

I am seeing the same issue, using NX like you as well.

[emcfarlane]

edit: Zustand issue followed from the closed linked issue: pmndrs/zustand#351

[balazsorban44]

Hi, could you verify if this is still the case with the latest of Next.js?

[imdavidmin]

@balazsorban44 I have jut seen this running Next 12.0.4. I'm not able to test newer versions because of issues with yarn PnP support bug.

[balazsorban44]

12.0.8 just came out with a few fixes, and also there is an open PR that would help further #33236

#32115 (comment) is also an option.

[imdavidmin]

@balazsorban44 Seems like the regeneratorRuntime issue is triggered by having a webpack config as follows:

module.exports = {
    experimental: {
        swcFileReading: false,
    },
    webpack: (config, options) => {
        config.module.rules.push({
            test: /\.[tj]sx?$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript']
                }
            },
        })
        return config
    }
};

Commenting out the webpack key makes the issue go away.
Not sure if I'm doing anything particularly wrong here or if this is a bug.

"babel-loader": "^8.2.3",
"@babel/core": "^7.16.7",
"@babel/preset-env": "^7.16.8",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",

[balazsorban44]

After some research, this seems to be a reoccurring issue with Nx, I suggest you post this there to get help.

[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.