Reputation: 34224

typescript: Cannot find module 'react'

I don't understand why it can't find it.

$ cat tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es6",
    "jsx": "react",
    "types": [
      "lodash",
      "react",
      "react-dom"
    ]
  }
}

$ tree node_modules/@types

node_modules/@types/
├── lodash
│   ├── README.md
│   ├── index.d.ts
│   ├── package.json
│   └── types-metadata.json
├── react
│   ├── README.md
│   ├── index.d.ts
│   ├── package.json
│   └── types-metadata.json
└── react-dom
    ├── README.md
    ├── index.d.ts
    ├── package.json
    ├── server.d.ts
    └── types-metadata.json

Importing in a component file.

// src/components/component.tsx

import * as React from "react";

What gives?

Upvotes: 63

Answers (17)

Umer Nazir

Reputation: 1

If you are using yarn packageManager > 3 i.e you have line something like this in your package.json file

"packageManager": "yarn@3.*.*"

then you just need to add this file at root of your project

.yarnrc.yml

and add this in .yarnrc.yml file

nodeLinker: node-modules

after this just do yarn and it will work perfectly fine.

Upvotes: 0

Kishan Kumar

Reputation: 1

I was facing same issue when i was working with Nextjs. The issue was resolve with types/react version 18.0.1.

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

Upvotes: 0

abhish

Reputation: 449

i am writing for `react-native` assuming you have used `babel-plugin-module-resolver` and all your code is inside src folder <br />
These are the files required to be configured in-order to work on absolute imports in typescript<br />

1. babel.config.js add the module-resolver plugin as below <br/>
`module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          src: './src',
        },
      },
    ],
  ],
};`

2. update ts config with below code <br />
 `"baseUrl": ".",
    "paths": {
      "src": ["src/*"],
      "tests": ["tests/*"]
    },`

3. then all your import will starts with src for example. `import funkyImage from src/images/funkyImage.png`

Upvotes: 0

Vaidotas Strazdas

Reputation: 716

One more thing that developer might want to try on Windows if none of these answers work. Sometimes you have multiple users on your device having different permissions, and mostly you are obliged to use the user with non-admin permissions. In this case, some folders that are accessible to admins only (modules you are importing into the project) are not accessible to users. Solution: Run VS Code with administrator privileges.

Upvotes: 0

hellowhirl

Reputation: 511

If you are joining a project that was started by someone else, it is likely that the repo already has the proper devDependencies listed (e.g. @types/react) in package.json. You just need to initiate them with:

npm install

Upvotes: 4

Sheikha Hanna

Reputation: 21

Delete the node_modulespackage and yarn_lock file (if you have any). Then try a yarn install and restart your VS Code. Worked for me perfectly.

Upvotes: 0

Nicolas Trote

Reputation: 136

For resolving the typescript "Cannot find module 'react'", which comes from eslint rules,

You need to install @types/react :

$ npm i -D @types/react

$ yarn add -D @types/react

And in your ".eslintrc" file add in extends array the react plugin:

...
extends: [
        'plugin:react/recommended',
        ...  
],

Upvotes: 9

DjTrilogic

Reputation: 107

As on version 2.4.* the responsible config entry of this error (in most of the cases) is:

"compilerOptions": {
          ...
          "moduleResolution": "node" <---------- this entry
          ...
}

Upvotes: 8

Dingus45191

Reputation: 569

npm i @types/react or yarn add @types/reactwill solve the issue. The error is occurring due to missing react types

Upvotes: 0

mlukasik

Reputation: 431

Had the same issue. In my case disabling deno extension solved the problem. It was somehow messing with the imports.

Upvotes: 4

Liviu Sosu

Reputation: 1567

At the point in time of writing this comment, I saw an error on my cmd saying that I do not have typescript installed.

npm install typescript

and it did the trick

Upvotes: 1

Nicolas Trote

Reputation: 136

I have solved the same issue with types :

npm i -D @types/react or yarn add @types/react

More over my tsconfig.json "jsx" parameter was changing from "react" to "react-jsx" automatically at yarn start. If it can help are is my tsconfig which works for me:

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "allowJs": true,
    "removeComments": true,
    "sourceMap": true,
    "noResolve": false,
    "noImplicitAny": false
  },
  "include": [
    "src",
    "./node_modules/**/*"
  ]
}

Upvotes: 1

Mahdi Ghajary

Reputation: 3253

If you have installed @types/react and it still doesn't work, I recommend that you use a recent version of Typescript and then close your IDE/editor, delete node_modules folder, and run npm install or yarn install and check it again. it should work now.

Upvotes: 3

Makafui Naaman

Reputation: 11

Also check to see if your node_modules is present. If it is and you are still experiencing this problem, delete it and reinstall it by running npm install. This solved the problem for me

Upvotes: 0

Sachin Shrivastav

Reputation: 81

const React = require("react");

This fixed the issue.

Upvotes: -15

Ihor Pavlyk

Reputation: 1331

I had the same issue. You just need to install @types:

npm i -D @types/react

Upvotes: 69

rkstar

Reputation: 1220

if you're not using typescript 2.1, you should upgrade to it. it looks like you're using a 2.x version from the @types you have there.

here is a working tsconfig.json file that i'm using right now:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "noResolve": false,
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react"
  },
  "exclude": [
    "./node_modules/**/*"
  ]
}

it's been a couple days since i resolved the same issue you were having, but i think the key here is the "moduleResolution": "node" and "allowJs": true.

Upvotes: 30

typescript: Cannot find module &#39;react&#39;

Answers (17)

Related Questions

typescript: Cannot find module 'react'