Cannot find module ‘react/jsx-runtime’ or its corresponding type declarations – How to solve this error?

The error “Cannot find module ‘react/jsx-runtime’ or its corresponding type declarations” relates to React installation and version. So what is the cause of this error and how to fix it? This article will help you answer this question. Let’s go into detail now.

What causes error “Cannot find module ‘react/jsx-runtime’ or its corresponding type declarations”

The error happened when React couldn’t find ‘react/jsx-runtime’ module. Because ‘react/jsx-runtime’ only exists in React v17 which is an old version. If you are stuck with a version lower than 17, you can update react and react-dom to the latest version to solve the error.

The error looks something like this:

Cannot find module ‘react/jsx-runtime’ or its corresponding type declaration. ts(2307)

The solution for this error

Use ‘npm install’

First, you should go to your package.json file and check if it contains the ‘@types/react’ package.

It looks something like this:

{
	"name": "typescript_react",
    "version": "0.1.0",
    "private": true,
   	"dependencies": {
    	"@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
	},

	"devDependencies": {
      	"@types/react": "^18.0.21",
      	"@types/react-dom": "^18.0.6"
   	}
}

If not, you can use this command below to install all packages.

npm install
npm install –save-dev @types/[email protected] @types/[email protected]

if you are using yarn:

yarn add @types/[email protected] @types/[email protected] –dev

This command line will help you to install React, which can use typescript in the latest version and save it in ‘devDependencies’.

If you want to update react and react-dom, you can use this command:

npm install [email protected] [email protected]

Set tsconfig.json file

You can set the “jsx” option to “react-jsx”. With this setting, you can control how JSX constructs emit in Javascript files.

Example:

{
	“compilerOptions”:{
       // Some code line…
    	“jsx”: “react-jsx”
	},
    // Some code line…
}

If the error still happens, you can try to remove the ‘node_modules’ and ‘package-lock.json’ files. You can remove that file by using this command below:

rm –of node_modules
rm –f package-lock.json

Reset ‘node_modules’ and ‘package-lock.json’

Then you can re-install that file by this command:

npm install

Remember to restart your IDE to apply the change.

Summary

In this article, I’ve shown you how to fix the error “Cannot find module ‘react/jsx-runtime’ or its corresponding type declarations”. You can use the npm install command to install all packages required or set them in the tsconfig.json file. In addition, you can also reset ‘node_modules’ and ‘package-lock.json’. Good luck for you!

Maybe you are interested:

• Top-level ‘await’ expressions are only allowed when the ‘module’ option is set to ‘es2022’, ‘esnext’ – How to fix it?
• Cannot use import statement outside a module
• Solution For The Error: Could not find declaration file for module ‘lodash’ #

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm