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?

The output from running with --traceResolution would be helpful — Ryan Cavanaugh
– Ryan Cavanaugh, Commented Dec 1, 2016 at 0:37

Ihor Pavlyk · Accepted Answer · 2018-02-20 06:54:30Z

70

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

npm i -D @types/react

edited Feb 20, 2018 at 6:54

answered Dec 26, 2016 at 18:35

Ihor Pavlyk

1,3511 gold badge14 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ruffin Over a year ago

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."

GAMA Over a year ago

yarnpkg.com/package/@types/react worked for me as I use Yarn.

rkstar · Accepted Answer · 2016-12-13 19:40:38Z

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.

cigien · Accepted Answer · 2021-10-12 07:29:05Z

9

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

edited Oct 12, 2021 at 7:29

cigien

61k11 gold badges85 silver badges122 bronze badges

answered Feb 20, 2020 at 19:29

Nicolas Trote

1361 silver badge5 bronze badges

Comments

cigien · Accepted Answer · 2021-10-12 07:27:59Z

7

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

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

edited Oct 12, 2021 at 7:27

cigien

61k11 gold badges85 silver badges122 bronze badges

answered Jul 18, 2017 at 15:00

DjTrilogic

1051 silver badge4 bronze badges

1 Comment

Eric Burel Over a year ago

What's the solution then?

mlukasik · Accepted Answer · 2021-05-26 12:20:54Z

4

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

edited May 26, 2021 at 12:20

answered May 12, 2020 at 11:03

mlukasik

4411 gold badge6 silver badges4 bronze badges

Comments

hellowhirl · Accepted Answer · 2022-04-28 05:15:56Z

4

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

answered Apr 28, 2022 at 5:15

hellowhirl

5316 silver badges6 bronze badges

Comments

Mahdi Ghajary · Accepted Answer · 2020-11-08 10:48:03Z

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.

answered Nov 8, 2020 at 10:48

Mahdi Ghajary

3,2631 gold badge19 silver badges21 bronze badges

Comments

Nicolas Trote · Accepted Answer · 2020-12-11 16:33:51Z

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

Liviu Sosu · Accepted Answer · 2020-12-24 14:49:02Z

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

answered Dec 24, 2020 at 14:49

Liviu Sosu

1,5994 gold badges17 silver badges33 bronze badges

Comments

Umer Nazir · Accepted Answer · 2024-11-19 20:07:25Z

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.

answered Nov 19, 2024 at 20:07

Umer Nazir

111 bronze badge

Comments

Makafui Naaman · Accepted Answer · 2020-08-14 21:45:08Z

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

answered Aug 14, 2020 at 21:45

Makafui Naaman

111 bronze badge

Comments

Dingus45191 · Accepted Answer · 2021-07-13 15:39:32Z

0

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

answered Jul 13, 2021 at 15:39

Dingus45191

5791 gold badge8 silver badges20 bronze badges

Comments

Sheikha Hanna · Accepted Answer · 2021-12-27 08:57:06Z

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.

answered Dec 27, 2021 at 8:57

Sheikha Hanna

212 bronze badges

Comments

Eric Aya · Accepted Answer · 2022-10-25 15:38:37Z

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.

edited Oct 25, 2022 at 15:38

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Oct 25, 2022 at 15:28

Vaidotas Strazdas

7143 silver badges14 bronze badges

Comments

abhiSHH · Accepted Answer · 2022-11-20 18:29:24Z

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`

Kishan Kumar · Accepted Answer · 2023-03-14 13:29:56Z

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/[email protected]

answered Mar 14, 2023 at 13:29

Kishan Kumar

1

Comments

Pang · Accepted Answer · 2018-02-21 02:10:03Z

-15

const React = require("react");

This fixed the issue.

edited Feb 21, 2018 at 2:10

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Feb 20, 2018 at 20:33

Sachin Shrivastav

812 silver badges1 bronze badge

Collectives™ on Stack Overflow

typescript: Cannot find module 'react'

17 Answers 17

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related