找不到模块‘react’。.ts(2307)

Question

我正在尝试使用TypeScript创建一个react应用程序。我确实创建了react-app (name) --use-pnp --typescript。

TS林特一直说找不到‘react’模块。TS(2307)我已经尝试了yarn add @types/react，yarn add，restarting VScode等。

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;

我的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"
    ]
  }
}

我的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"
  ]
}

我尝试过yarn add @types/react，yarn add，重启VScode等。

Answer 1

解决方案：我不得不手动更改TS版本编辑器(VSC)应该使用的版本。以下说明(工作于2021年1月)。

在我的例子中，这个错误是因为Visual Studio代码使用的是全局/默认TypeScript版本，而不是工作区/项目版本。这一点很重要，因为linter/编辑器并没有拾取定义模块应该如何解析的tsconfig.json。

这是VSC中的linter错误：

​

这里的答案是缺少react模块，但在我的例子中，它是我的本地模块--尽管如此，错误代码是相同的，这个解决方案在某些情况下可能会有所帮助。

要在Visual Studio代码中更改TS版本，您可以单击编辑器窗口底部的版本(屏幕截图中的4.1.2)：

​

​

选择“选择TypeScript版本...”选项：

​

​

然后选择"Use Workspace Version"：

​

​

这样做之后，错误就消失了。

我的tsconfig.json参考：

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

我也有同样的问题，发现这个s/o问题没有答案。我想我会分享我的解决方案。也许对你来说也是一样。如果不是，也许它可以帮助其他人：

对我来说，奇怪的是，这是因为我没有正确安装react，或者它是过时的。

要在VS2019中修复它：(以管理员身份运行)

菜单:工具->命令行->PowerShell

npm install @types/react

(不像你)我也有一个丢失的package.json文件的问题，但我有一个包--lock.json。我创建了一个包-lock.json的备份(Zip)并将其重命名为package.json，然后再次执行npm install @types/react，它开始解析依赖项。

我还收到了其他一些类似的错误消息：“需要React@^16的对等机，但没有安装”……我发现了另一个S/O问题，解决了剩下的问题：react-router-dom@4.0.0 requires a peer of react@^15 but none is installed. You must install peer dependencies yourself

后来，一位同事指出，实际上有一个package.json文件，但它在不同的文件夹中。我需要cd到那个文件夹并运行npm install。这是解决所有问题的最后一步。

Answer 3

我遇到了同样的问题，这是因为我在vscode中安装了Deno扩展。Deno不理解node-modules。禁用扩展解决了我的问题