Cannot find module 'react' Error in TypeScript [Solved]
# Cannot find module 'react' Error in TypeScript
To solve the "Cannot find module react
or its corresponding typedeclarations" error, install the module and its type definitions by running thecommands npm install react
and npm i --save-dev @types/react
.
Make sure to install the react
module and its type definitions by opening yourterminal in your project's root directory and running the following commands.
shell
Copied!
# 👇️ with NPMnpm install react react-domnpm install --save-dev @types/react @types/react-dom# ---------------------------------------------------# 👇️ with YARNyarn add react react-domyarn add @types/react @types/react-dom --dev
Now you should be able to import the reactlibrary with the following line of code.
index.ts
Copied!
import React from 'react';console.log(React);
This should fix the error and now TypeScript should be able to find the type definitions for the react
library.
# Set moduleResolution
to node
in tsconfig.json
If that doesn't help, try setting moduleResolution
to node
in yourtsconfig.json file.
tsconfig.json
Copied!
{ "compilerOptions": { "moduleResolution": "node", // 👇️ ... rest }}
You can read more about classic
vs node
module resolution in theTypeScript docs.
# Delete your node_modules and reinstall your dependencies
If the error is not resolved, try to delete your node_modules
andpackage-lock.json files, re-runnpm install
and restart your IDE.
If you are on macOS or Linux, issue the following commands in bash
or zsh
.
shell
Copied!
# for macOS and Linuxrm -rf node_modulesrm -f package-lock.jsonrm -f yarn.lock# 👇️ clean npm cachenpm cache clean --force# 👇️ install packagesnpm install
If you are on Windows, issue the following commands in CMD.
cmd
Copied!
# for Windowsrd /s /q "node_modules"del package-lock.jsondel -f yarn.lock# 👇️ clean npm cachenpm cache clean --force# 👇️ install packagesnpm install
Make sure to restart your IDE anddevelopment server if the error persists.
You can also try to install the latest version of React and its typings.
shell
Copied!
# 👇️ with NPMnpm install react@latest react-dom@latestnpm install --save-dev @types/react@latest @types/react-dom@latest# ---------------------------------------------------# 👇️ with YARNyarn add react@latest react-dom@latestyarn add @types/react@latest @types/react-dom@latest --dev
# Make sure you have the react-related packages installed
If you still get the error, open your package.json
file and make sure itcontains the react
package in the dependencies
object.
package.json
Copied!
{ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", }, "devDependencies": { "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10" }}
The react
and react-dom
modules have to be in your dependencies
object.
The @types/react
and @types/react-dom
packages have to be in yourdevDependencies
object.
You can try to manually add the lines and re-run npm install
.
shell
Copied!
npm install
Or install the latest version of the packages:
shell
Copied!
# 👇️ with NPMnpm install react@latest react-dom@latestnpm install --save-dev @types/react@latest @types/react-dom@latest# ---------------------------------------------------# 👇️ with YARNyarn add react@latest react-dom@latestyarn add @types/react@latest @types/react-dom@latest --dev
If the error persists, follow the instructions in myCannot find module 'X' error in TypeScriptarticle.
I've also written a detailed guide onhow to use create-react-app with TypeScript.
# Additional Resources
You can learn more about the related topics by checking out the followingtutorials:
- Set optional props with default values in React TypeScript
- Pass CSS styles as props in React TypeScript
- Extend an HTML Element in a Component's props in React (TS)
- How to pass Functions as Props in React TypeScript
- React Typescript "Cannot find name" error [Solved]
- Type the onChange event of an element in React (TypeScript)
- Type the onClick event of an element in React (TypeScript)
- Type the onFocus and onBlur events in React (TypeScript)
- Type onKeyDown, onKeyUp, onKeyPress events in React (TS)
- Type the onSubmit event in React (TypeScript)