Compiling error: Did you mean to import react/jsx-runtime.js - 11.1

[candidosales]

What version of Next.js are you using?

11.1.0

What version of Node.js are you using?

12.22.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

local

Describe the Bug

After upgrading the Next to 11.1.0 isn't more possible to run my application. I'm receiving the error below:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/candidosg/Documents/Projects/-/.env.local
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/candidosg/Documents/Projects/-/node_modules/react/jsx-runtime' imported from /Users/candidosg/Documents/Projects/-/node_modules/react-data-grid/lib/bundle.js
Did you mean to import react/jsx-runtime.js?
    at finalizeResolution (internal/modules/esm/resolve.js:271:11)
    at moduleResolve (internal/modules/esm/resolve.js:694:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:784:11)
    at Loader.resolve (internal/modules/esm/loader.js:100:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:246:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:47:40)
    at link (internal/modules/esm/module_job.js:46:36)
This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/candidosg/Documents/Projects/-/node_modules/react/jsx-runtime' imported from /Users/candidosg/Documents/Projects/-/node_modules/react-data-grid/lib/bundle.js
Did you mean to import react/jsx-runtime.js?
    at finalizeResolution (internal/modules/esm/resolve.js:271:11)
    at moduleResolve (internal/modules/esm/resolve.js:694:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:784:11)
    at Loader.resolve (internal/modules/esm/loader.js:100:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:246:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:47:40)
    at link (internal/modules/esm/module_job.js:46:36)
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Expected Behavior

Expect to works as before, with no errors in the compiling.

To Reproduce

Create a small project using the react-data-grid in the ^7.0.0-beta.2. link and next run npm run dev or yarn run dev;

[exneval]

Also experience the same problem with react-data-grid installed, not a problem before 11.1.0

[sauloquirino]

Same error, same nextjs version, same package "react-data-grid", nodejs version 16.6.2.

Problem started after migrating nextjs to 11.1.0

Unable to push changes to Vercel

[sauloquirino]

This has NOT HELPED!

// next.config.js
module.exports = {
// Prefer loading of ES Modules over CommonJS
experimental: { esmExternals: true }
}

[candidosales]

I found a solution but it isn't properly.

I added this snippet below into the ./node_modules/react/package.json:

{
   "type":"commonjs",
   "exports":{
      ".":"./index.js",
      "./jsx-dev-runtime":"./jsx-dev-runtime.js",
      "./jsx-runtime":"./jsx-runtime.js",
      "./":"./"
   }
}

Locally is working, but when I send it to deploy I still receiving the same error because my node_modules isn't sent.

The second approach is to disable the webpack 5 in the next.config.js:

module.exports = {
  webpack5: false,
}

This approach works locally and in production, so there is some issue related to webpack 5 to recognize some JS modules.

Reference:

• https://nextjs.org/docs/messages/webpack5
• Bug: Cannot import 'react/jsx-runtime' from esm node/webpack 5 facebook/react#20235 (comment)
• Bug: Cannot import 'react/jsx-runtime' from esm node/webpack 5 facebook/react#20235 (comment)
• https://nextjs.org/docs/messages/invalid-resolve-alias

[sauloquirino]

Thanks @candidosales

Unfortunately neither solution works for my project.

I have opened an issue with the react-data-grid and someone there gave the same as your first solution

I'm hoping someone from the Next team (😉 @timneutkens @leerob 😉) could assist us to understand how to proceed.

[candidosales]

I saw this solution upgrading the React to alpha version and fixed the issue: adazzle/react-data-grid#2568

npm install react@alpha react-dom@alpha

Thanks @sauloquirino!

[rtritto]

I have same Error using, instead of react-data-grid, the latest version of p-limit (package becomes ESM).

[candidosales]

Another way that I found to fix it is using yarn v3.0.2 and run the project with yarn dev. How to install it: https://yarnpkg.com/getting-started/install

Reference:

• Bug: Cannot import 'react/jsx-runtime' from esm node/webpack 5 facebook/react#20235 (comment)

[Dalcio]

face this erro too. And solved updating react and react-dom libs
npm install react@latest react-dom@latest
yarn add react@latest react-dom@latest

[gary-lev]

Updating react to latest did not help me, but this linked issue did:

next.config.js:

/** @type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')(['react-data-grid']) // or whatever library giving trouble

module.exports = withTM({
  reactStrictMode: true,
})

(To clarify I'm not using react-data-grid, but another library. Hopefully fix applies to react-data-grid)

[balazsorban44]

Following up on the issue links that are posted here, this is probably an issue in react-data-grid or even react.

Upgrading to react@rc and react-dom@rc resolved the issue.

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