6

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.

orjames
  • 61
  • 1
  • 1
  • 4

10 Answers10

11

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: Linter error: "Cannot find module or its corresponding type declarations."

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):

TypeScript React, version 4.1.2 in the editor window

Select option "Select TypeScript Version...":

Select option "Select TypeScript Version..."

And then pick "Use Workspace Version":

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"
  ]
}
krinoid
  • 379
  • 4
  • 5
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: react-router-dom@4.0.0 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.

tgolisch
  • 6,549
  • 3
  • 24
  • 42
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

Nailuj29
  • 750
  • 1
  • 10
  • 28
1

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.

nyedidikeke
  • 6,899
  • 7
  • 44
  • 59
0

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

Rizzle
  • 1
0

I had the same issue here but it was because I manually renamed the folder that the whole react project lived in.

The only thing I had to do to fix was rerun pnpm install/npm install

CrabBucket
  • 69
  • 7
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/32448922) – Arash Ghazi Aug 16 '22 at 18:56
  • @ArashGhazi I disagree I had the exact same error but it was not because the linter was confused but because the files simply weren't there. Googling the exact error code brought me to this stack overflow page which was of no help because the error code was being generated for a different reason by the linter. If someone else in the future were to google this error after making the same mistake I do they will likely find this page and hopefully my answer can help them with a sanity check that the types are actually being imported and defined. – CrabBucket Aug 19 '22 at 16:13
0

This happened to me also. Suddenly it affected all my typescript projects, even those that were working fine before.

I tried many different solutions and spent a lot of time to solve this issue. For me worked just to remove node modules that were installed globally.

rm -rf /usr/local/lib/node_modules

Iurii Furman
  • 1
0

I solved this by deleting node_modules and re-installing it.

Greg
  • 21
  • 3
-1

What did it for me - just close the editor and open it again :)

m b k
  • 145
  • 1
  • 4
-3

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';
Atzi
  • 457
  • 1
  • 6
  • 16