49

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?

1
  • 5
    The output from running with --traceResolution would be helpful Dec 1, 2016 at 0:37

16 Answers 16

49

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

npm i -D @types/react
2
  • 14
    Which, for absolute n00bs (me) is the same as npm install --save-dev @types/react. From the docs: "-D, --save-dev: Package will appear in your devDependencies."
    – ruffin
    May 15, 2018 at 20:00
  • yarnpkg.com/package/@types/react worked for me as I use Yarn.
    – GAMA
    Dec 4, 2020 at 1:04
28

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.

0
8

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',
        ...  
],
0
7

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

"compilerOptions": {
          ...
          "moduleResolution": "node" <---------- this entry
          ...
}
1
  • 9
    What's the solution then?
    – Eric Burel
    Feb 26, 2020 at 18:21
4

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

0
3

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.

0
1

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

1

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
0

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

0

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

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

0

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.

0

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.

0
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`
0

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/react@18.0.1
-14
const React = require("react");

This fixed the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.