Cannot find module 'react' Error in TypeScript [Solved] | bobbyhadz (2024)

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.

Cannot find module 'react' Error in TypeScript [Solved] | bobbyhadz (1)

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:

Cannot find module 'react' Error in TypeScript [Solved] | bobbyhadz (2024)
Top Articles
Latest Posts
Article information

Author: Otha Schamberger

Last Updated:

Views: 6665

Rating: 4.4 / 5 (55 voted)

Reviews: 94% of readers found this page helpful

Author information

Name: Otha Schamberger

Birthday: 1999-08-15

Address: Suite 490 606 Hammes Ferry, Carterhaven, IL 62290

Phone: +8557035444877

Job: Forward IT Agent

Hobby: Fishing, Flying, Jewelry making, Digital arts, Sand art, Parkour, tabletop games

Introduction: My name is Otha Schamberger, I am a vast, good, healthy, cheerful, energetic, gorgeous, magnificent person who loves writing and wants to share my knowledge and understanding with you.