Module not found: Can't resolve 'react/jsx-runtime' in '...\node_modules\react-dnd\dist\esm\core'

[zehawki]

Describe the bug
Unable to compile with error: Module not found: Can't resolve 'react/jsx-runtime' in '...\node_modules\react-dnd\dist\esm\core'

To Reproduce
Steps to reproduce the behavior:

1. Upgrade this package to latest (including plugins)

[macrozone]

delete node_modules
run yarn install or npm install agin

[zehawki]

OK. I'm also updating CRA scripts to 4+ to see if that helps.

[zehawki]

And that has taken me down a different rabbithole facebook/create-react-app#9870

[zehawki]

delete node_modules
run yarn install or npm install agin

Nope. Still same error

[zehawki]

Would this be something on your side? As per this https://stackoverflow.com/questions/65913201/uncaught-error-cannot-find-module-react-jsx-runtime

[zehawki]

More resources:

1. React-dnd, not compatible with older version of react or react-dom react-dnd/react-dnd#3137
2. Bug: Cannot import 'react/jsx-runtime' from esm node/webpack 5 facebook/react#20235
3. And a possible solution: Can't resolve 'react/jsx-runtime' adazzle/react-data-grid#2230 (comment)

[zehawki]

Well, solved with this adazzle/react-data-grid#2230 (comment) (I was on version "16.13.1")

[macrozone]

how did you solve it? i think you should try to upgrade to react 17.x. and latest create-react-app

I did not see the error on my apps (all nextjs)

[zehawki]

By upgrading to react 16.14.0 from 16.13.1, as suggested in that comment I shared (adazzle/react-data-grid#2230 (comment))

[macrozone]

the problem is as it seems that react-dnd switched to jsx-factory in this release https://github.com/react-dnd/react-dnd/releases/tag/13.0.0

and that seems to require react 16.14.

react-dnd correctly declares react 16.14 as min peer dependency.

We should also bump the min version to 16.14.

i also recommend to try to upgrade to react 17 already. I did not experience any problem with it.

[zehawki]

i also recommend to try to upgrade to react 17 already. I did not experience any problem with it.

A bit afraid to do yet that since I have a really huge project on my side.

[macrozone]

🎉 This issue has been resolved in version 2.0.1 🎉

The release is available on:

• v2.0.1
• GitHub release

Your semantic-release bot 📦🚀

[macrozone]

🎉 This issue has been resolved in version 2.1.0-beta.4 🎉

The release is available on:

• v2.1.0-beta.4
• GitHub release

Your semantic-release bot 📦🚀

[Goutham0931]

Solved in my case.
Giving it as "latest" rather than mentioning version in package,json dependencies
"@emotion/react": "latest",
"@emotion/styled": "latest",
"@material-ui/core": "latest",
"@material-ui/icons": "latest",