Cannot find module react/jsx-runtime – when using React 17 with TypeScript
If you are encountering the “Cannot find module react/jsx-runtime” error while using React 17 with TypeScript, don’t worry, you’re not alone. This issue often occurs when you have upgraded to React 17 and are using TypeScript, as React 17 no longer includes the jsx-runtime module by default. However, there are a few solutions to resolve this problem.
Solution 1: Install the jsx-runtime package
The easiest way to resolve this issue is by installing the jsx-runtime package. This package provides the necessary runtime support for JSX in React 17.
To install the jsx-runtime package, open your terminal and navigate to your project directory. Then, run the following command:
npm install --save-dev @types/react-jsxThis command will install the jsx-runtime package as a development dependency in your project.
Solution 2: Update your tsconfig.json file
If installing the jsx-runtime package does not solve the issue, you may need to update your tsconfig.json file to include the necessary settings for React 17.
Open your tsconfig.json file and add the following lines:
{
"compilerOptions": {
"jsx": "react-jsx"
}
}This configuration tells TypeScript to use the jsx-runtime package for JSX support.
Solution 3: Use the React.Fragment syntax
If you prefer not to install any additional packages or modify your tsconfig.json file, you can also use the React.Fragment syntax instead of the shorthand syntax.
Replace the following code:
<>With:
This change ensures that TypeScript recognizes the JSX syntax correctly without relying on the jsx-runtime module.
And that’s it! By following one of these solutions, you should be able to resolve the “Cannot find module react/jsx-runtime” error when using React 17 with TypeScript.
We hope this article has been helpful in solving your problem. If you have any further questions or issues, feel free to reach out to us.
Happy coding!
Leave a Reply