typescript: Cannot find module 'react'

Question

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?

Answer 1

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

npm i -D @types/react

Answer 2

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 .

Answer 3

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

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

I hope it helps someone !

Answer 4

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

You need to install @types/react :

$ npm i -D @types/react

or

$ yarn add -D @types/react

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

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

Hope it will be more clear for all :D

Answer 5

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

Answer 6

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.

Answer 7

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

npm install

Answer 8

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

Answer 9

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/**/*"
  ]
}

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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.

Answer 14

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`

Answer 15

const React = require("react");

这解决了这个问题。