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 this same problem and it was because I had the Deno extension installed in vscode. Deno does not understand node-modules. Disabling the extension solved my problem

Answer 3

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.

Answer 4

The Cannot find module 'xxx'.ts(2307) error is an indication that the xxx package listed in your package.json file is not present in your node_modules directory or cannot be reached, for other reasons.

In order to resolve the error, do change directory to the root of your application in your command-line interface (CLI) and run npm install xxx.

... where xxx is the name of the missing package; in this instance, React.

Should that fail, you may want to navigate to the "PowerShell" under the "Command Line" of the "Tools" section of VS Code to execute same.

Answer 5

I know this is for VS Code but the solution where you remove the Deno extension worked for me on IntelliJ

Answer 6

I'm not sure but I think you can only use react in .tsx files. Also the first line must be

import * as React from "react";
import { Component } from 'react';