[Solved] Module not found: Error: Can’t resolve ‘react/jsx-runtime’ In ReactJs

While are you trying to create a shared component using a storybook with react-redux. Due to some error unable to create the shared component, Then you will face Module not found: Error: Can’t resolve ‘react/jsx-runtime’, this error.

In this article, we will discuss about this Module not found: Error: Can’t resolve ‘react/jsx-runtime’ in ReactJs. And how to resolve the error all the possible solutions with examples.

How Module not found: Error: Can’t resolve ‘react/jsx-runtime’ Error Occurs?

Most of the time you get this error while trying to create a shared component using rollup. It looks as like below:

Module not found: Error: Can't resolve 'react/jsx-runtime'

How To Fix Module not found: Error: Can’t resolve ‘react/jsx-runtime’ Error?

There are different ways to fix Module not found: Error: Can’t resolve ‘react/jsx-runtime’ this error. Let us take a look at every solution.

• How To Fix Module not found: Error: Can’t resolve ‘react/jsx-runtime’ Error?

For the solve Module not found: Error: Can’t resolve ‘react/jsx-runtime’ Error First you need to update react package by opening your terminal in your project’s root directory then run this command: npm install –save [email protected]. Now, Your error should be solved.

• Module not found: Error: Can’t resolve ‘react/jsx-runtime’

For the solve Module not found: Error: Can’t resolve ‘react/jsx-runtime’ Error You have to use React < 17 & Typescript < 4.1.0 then change the following tsconfig: “jsx”: “react” Now, your error will be gone. Second Solution if you use React 17 on both the library and the other repository with: “jsx”: “react-jsx” Now, your error must be solved.

Solution 1: update react version 

To solve this error first you have to update React version using below the command:

npm install --save [email protected]

If you use a Specific version then you need to run: npm install –save [email protected] e.g. npm install –save [email protected]

Solution 2: For React < 17

If you are use React < 17 & Typescript < 4.1.0 then change this following tsconfig.

"jsx": "react" // from jsx-react

Now, your error will be solved.

Solution 3: For React 17

If You are using React 17 then Just Change the following tsconfig.

"jsx": "react-jsx"

Now, Your error must be solved.

Conclusion

In this article, we have discussed what causes the error and we have discussed ways to fix the error.

we hope this article has been informative. Thank you for reading. Kindly comment and let us know if you found it helpful.