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

[artivilla]

Is there a way we can get this working while we wait for the patch release?

[badsyntax]

@artivilla you can use https://www.npmjs.com/package/patch-package

[artivilla]

@badsyntax weird. Didn't resolve my issues.

[badsyntax]

@artivilla it's fairly straightforward if you follow the README but here's some detailed instructions facebook/react#20235 (comment)

[artivilla]

Yep, no I managed to do the patch but I was still running into the same issue so for now I've just downgraded to jest@26. Will take when the patch is released. Either way patch-package is v neat library!

[samjt]

patch-package won't work if you're using yarn 3/pnp.
You instead need to apply the patch using yarn patch