Compiling error with NextJS 11.1.0: Did you mean to import react/jsx-runtime.js

[sauloquirino]

What version of React Data Grid are you using?
^7.0.0-beta.2

What version of Next.js are you using?
11.1.0

What version of Node.js are you using?
16.6.2

What browser are you using?
Chrome

What operating system are you using?
Windows 10

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:

Build error occurred
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\dev\Heroes Invest\infinity\node_modules\react\jsx-runtime' imported from D:\dev\Heroes Invest\infinity\node_modules\react-data-grid\lib\bundle.js
Did you mean to import react/jsx-runtime.js?
at new NodeError (node:internal/errors:371:5)
at finalizeResolution (node:internal/modules/esm/resolve:321:11)
at moduleResolve (node:internal/modules/esm/resolve:756:10)
at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:867:11)
at Loader.resolve (node:internal/modules/esm/loader:89:40)
at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
at ModuleWrap. (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36) {
type: 'Error',
code: 'ERR_MODULE_NOT_FOUND'
}
error Command failed with exit code 1.

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

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

[nstepien]

facebook/react#20235 (comment)

[sauloquirino]

facebook/react#20235 (comment)

Thank you for the hint.

Unfortunately it didn't work for me at all.
It actually broke the loading of most Next Modules

[nstepien]

What does your config look like?
Not 100% familiar with Next.js, but you might have to keep the existing aliases instead of overriding the entire field, i.e.:

  return {
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        'react/jsx-runtime': require.resolve('react/jsx-runtime')
       }
    }
  }

https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config

[MikeMatrix]

Running into the same problem here.
I tried the suggestions above with react-data-grid@react-data-grid, but no luck there.
Had to roll back to [email protected] for the time being.

module.exports = {
    webpack5: true,
    webpack: (config) => {
        // Unset client-side javascript that only works server-side
        config.resolve.fallback = { fs: false, module: false }
        config.resolve.alias['react/jsx-runtime'] = require.resolve('react/jsx-runtime')
        config.resolve.alias['react/jsx-dev-runtime'] = require.resolve('react/jsx-dev-runtime')

        return config
    },
    reactStrictMode: true,
    i18n: {
        locales: ['de-DE'],
        defaultLocale: 'de-DE',
    },
}

[nstepien]

Can you try replacing

require.resolve('react/jsx-runtime')

with

path.resolve('./node_modules/react/jsx-runtime.js')

This is what we use internally with webpack 5.
Might need some tweaking depending on the location of your config file/node_modules.

[MikeMatrix]

Just tried your recommendation, but no avail. both path.resolve and require.resolve resulted in the same path.

{
  path: 'C:\\Data\\Development\\someproject\\node_modules\\react\\jsx-runtime.js',
  require: 'C:\\Data\\Development\\someproject\\node_modules\\react\\jsx-runtime.js'
}

The only thing of note I can add, is that the node_modules folder lies within the root of the yarn workspace, while the next project is within ./packages/client. Although I somehow doubt that would influence it.

[nstepien]

Does the jsx-runtime.js file actually exist at that path? 🤔

[MikeMatrix]

Does the jsx-runtime.js file actually exist at that path? 🤔

I checked just now and yes, it does.

[nstepien]

Might not be an issue with webpack then, might be node failing to import as it respects its esm import semantics.
facebook/react#20235 (comment)

Best bet would be to have it fixed upstream in React. Try bugging the React devs on GitHub/Twitter. It's just a matter of adding the exports field which exists in the React 18 alphas. 🤷‍♂️

See also vercel/next.js#27977

[MikeMatrix]

Might not be an issue with webpack then, might be node failing to import as it respects its esm import semantics.
facebook/react#20235 (comment)

Best bet would be to have it fixed upstream in React. Try bugging the React devs on GitHub/Twitter. It's just a matter of adding the exports field which exists in the React 18 alphas. 🤷‍♂️

See also vercel/next.js#27977

Seems to definitely be the solution. I just tried by applying a yarn patch to react, that would add the fields that you mentioned in facebook/react#20235 (comment) and it seems to be compiling fine again.

I'll try and bug them upstream then. Thanks for the help so far.

[sauloquirino]

I was able to update React to 18 Alpha and the error is gone!

[candidosales]

@sauloquirino what's the version of the package?

Answer: reactwg/react-18#9

[sauloquirino]

Latest of everything as of today (sorry, not in front of my computer right now)

[candidosales]

It's working! Thanks! :)

npm install react@alpha react-dom@alpha

[YuriGor]

Adding webpack aliases did not help.

Upgrade to react 18 beta works for me
npm install react@beta react-dom@beta

I have nextjs 11.1.0 and use MUI 5 - it seems nothing is broken after upgrade to react 18.

upd: I had to downgrade back to react 17
in 18beta it seems some desync exists between main render cycle and native (non-react) events handlers so if you are using some e.g. to set not passive listeners - test carefully.
In v17 code called in listener and in changes made in render was in same js event loop cycle so visually all looked instant, now it's going to different ones and it causing visual jerking in my case.
Other "normal" stuff works fine, so I maybe will get back to beta and fix my issues when will have time.

[alamothe]

ERROR in ./node_modules/react-data-grid/lib/bundle.js 3:0-56
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/alamothe/Projects/car-manager/fleet-client/node_modules/react-data-grid/lib'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[tunesmith]

For those who can't upgrade to react18 yet, this is the only solution that worked for me with NextJS 12.1:

vercel/next.js#27977 (comment)

If you click through to the original issue, the library author of react-timezone-select claims they fixed it by exporting "a correct esm + cjs version".