If you don’t know how to fix the error “Module not found: Can’t resolve ‘react/jsx-runtime'”, don’t worry. We will give you some solutions in this article. Read on it.
What is JSX conversion?
Most React users depend on compilers like Babel or TypeScript to translate JSX code into standard JavaScript because browsers don’t understand it. A JSX transform is also included in several preset toolkits like Create React App and Next.js.
The following advantages result from upgrading to the latest migration:
- You can use JSX without importing React with the new transform.
- Depending on your setup, the package size may be slightly increased by its compiled output.
- It will make it possible to make improvements in the future that will make React learning fewer concepts easier.
- This upgrade will not alter the JSX syntax, so it is unnecessary. There is no intention to discontinue support for legacy JSX conversions; they will continue to function as anticipated.
What causes the error “Module not found: Can’t resolve ‘react/jsx-runtime’“?
When using rollup to construct a standard component, this error occurs frequently. The code shown on the console below is the error it should look like.
Module not found: Error: Can't resolve 'react/jsx-runtime'This error indicates that the program cannot find the ‘react/jsx-runtime’ module of the new JSX compiler. So how do we best fix it? Follow these steps below.
How to fix this error?
Update react to the latest version
The easiest way to fix this error is to update the react version to the latest version with the following npm command.
Terminal:
npm i --save react@latestBecause when initializing the program with React, it will have built-in ‘react/jsx-runtime’, so when you update the framework to a new version, you will also fix the error.
Edit the config file
This way, we will reconfigure the program by going to the config file of the react program you are coding to replace the old jsx according to the code below.
Code:
"jsx": "react-jsx"
When we use react 17 version, if we change this config, the program will run normally and not show the error “Module not found: Can’t resolve ‘react/jsx-runtime'” anymore. Hope it helps you.
Summary
To summarize, there are many ways to solve the error “Module not found: Can’t resolve ‘react/jsx-runtime'”. After reading this article, we know some easy ways, such as updating the latest react version or editing the config file. Let’s try them to get your desired results. Thanks for reading!
Maybe you are interested:
- Property ‘value’ does not exist on type HTMLElement
- Module not found: Can’t resolve ‘popper.js’
- Module not found: can’t resolve ‘#’ error in react
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs