Bug: [5.0] Can't resolve 'react/jsx-runtime'

Describe the bug

Importing the package react-data-grid results int he following error upon yarn start:

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.

No error is observed in CRA 4.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

Searched for: Can't resolve 'react/jsx-runtime'

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /Users/alamothe/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 11.6.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.18.2 - /usr/local/opt/node@14/bin/node
    Yarn: 3.2.0-rc.7 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/opt/node@14/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Edge: 96.0.1054.53
    Firefox: 94.0.2
    Safari: 15.1
  npmPackages:
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: 5.0.0 => 5.0.0 
  npmGlobalPackages:
    create-react-app: 4.0.3

Steps to reproduce

1. Import react-data-grid

Expected behavior

No error, like in 4.0

[alamothe]

@raix I agree with you but a simple entry in Webpack config fixes it (which is equivalent to what React 18 does):

diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
index 2b1b3bb..745ef7e 100644
--- a/node_modules/react-scripts/config/webpack.config.js
+++ b/node_modules/react-scripts/config/webpack.config.js
@@ -318,6 +318,10 @@ module.exports = function (webpackEnv) {
         .map(ext => `.${ext}`)
         .filter(ext => useTypeScript || !ext.includes('ts')),
       alias: {
+        // https://github.com/facebook/react/issues/20235
+        // https://github.com/facebook/create-react-app/issues/11769
+        "react/jsx-dev-runtime": "react/jsx-dev-runtime.js",
+        "react/jsx-runtime": "react/jsx-runtime.js",
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         'react-native': 'react-native-web',

[edouardruiz]

Hi,

I have the same issue when running npm run build in a project using graphql-js:

Module not found: Error: Can't resolve '../jsutils/inspect' in '/private/tmp/next-frontend/node_modules/graphql/language'
Did you mean 'inspect.mjs'?
BREAKING CHANGE: The request '../jsutils/inspect' 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.

Digging a bit in webpack issues led me to this solution.

Hardcoding this rule in CRA v5 webpack.config.js makes the error disappear but I guess there’s no way to edit the config without ejecting?