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

[alamothe]

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

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

[javierlopezdeancos]

I have the same error in some packages

There is no solution without eject??

[alamothe]

There is, you can use patch-package until it is fixed: https://github.com/ds300/patch-package

It's 100x easier than ejecting.

[raix]

It's not an issue in Webpack nor Create react app - Yes we could work around it, but would rather keep our code free of that and push back on package maintainers as this is not an issue isolated to CRA

E.g. regarding react/jsx-runtime:

• Existing issue in react-data-grid
• Exsiting issue in react - [PR merged]* (Add flight specific entry point for react package react#20304)
• Existing issue in next
• And the list goes on...

Why not workaround vs fixing the packages...

Should be fixed in React v18 - but can it be backported to react 17/16? - it would solve the issue community wise - so hesitant to add workarounds in CRA @gaearon any insights?

[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',

[raix]

Added the workaround in #11797 - should get out in next patch release v5.0.1