Cannot find module 'react'.ts(2307)

Question

I'm attempting to create a react app using TypeScript. I did yarn create react-app (name) --use-pnp --typescript.

The TS linter keeps saying that Cannot find module 'react'.ts(2307) I've tried yarn add @types/react, yarn add, restarting VScode etc.

import React, { Component } from 'react';
import './App.css';

interface IAppState {
}

interface IAppProps {
}

class App extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppState) {
  super(props);
  this.state = {
  };
  }


  render() {
    return (
      <div className='App'>
        <h1>Image classification with ML5.js</h1>
      </div>
    );
  }
}

export default App;

my package.json

{
  "name": "image-recognition",
  "version": "0.1.0",
  "private": true,
  "installConfig": {
    "pnp": true
  },
  "dependencies": {
    "@types/jest": "24.0.13",
    "@types/node": "12.0.2",
    "@types/react": "^16.8.17",
    "@types/react-dom": "^16.8.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "typescript": "3.4.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

I've tried yarn add @types/react, yarn add, restarting VScode etc.

Answer 1

Solution: I had to manually change which TS version editor (VSC) should use. Instructions below (working in January 2021).

In My case, the error was caused by the fact that Visual Studio Code was using global/default TypeScript version, instead of the workspace/project one. It was important, because the linter/editor wasn't picking up the tsconfig.json which defined how modules ought to be resolved.

This was the linter error in VSC:

The answer here has react module missing but in my case it was my local module -- still, the error code is the same and this solution might help in some cases.

To change the TS version in the Visual Studio Code, you can click on the version at the bottom of the editor window (4.1.2 in the screenshot):

Select option "Select TypeScript Version...":

And then pick "Use Workspace Version":

After doing that the error was gone.

My tsconfig.json for reference:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": ".",
    "strictNullChecks": true,
    "noImplicitThis": true,
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer 2

I had the same problem and found this s/o question with no answer. I thought I would share my solution. Maybe it was the same for you. If not, maybe it could help others:

For me, strangely, it was because I didn't have react installed properly, or it was out-of-date or something.

To fix it in VS2019: (running as admin)

Menu: Tools->Command Line->PowerShell

npm install @types/react

(unlike you) I also had a problem with a missing package.json file but I had a package-lock.json. I made a backup(zip) of package-lock.json and renamed it to package.json and did npm install @types/react again and it started resolving dependencies.

I had a few other error messages like it "requires a peer of React@^16 but none is installed"... I found another S/O question which solved the rest: [email protected] requires a peer of react@^15 but none is installed. You must install peer dependencies yourself

Later, a colleague pointed out that there actually was a package.json file, but it was in a different folder. I needed to cd to that folder and run npm install. That was the last step that fixed everything.