找不到模块 'react'.ts(2307)答案

【问题标题】：Cannot find module 'react'.ts(2307)找不到模块 'react'.ts(2307)
【发布时间】：2019-10-05 07:31:38
【问题描述】：

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

TS linter 一直说找不到模块 'react'.ts(2307) 我尝试过 yarn add @types/react、yarn add、重启 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 等。

【问题讨论】：

标签： reactjs typescript react-tsx

【解决方案1】：

解决方案：我必须手动更改应使用的 TS 版本编辑器 (VSC)。以下说明（2021 年 1 月生效）。

在我的情况下，错误是由 Visual Studio Code 使用全局/默认 TypeScript 版本而不是工作区/项目版本引起的。这很重要，因为 linter/editor 没有选择 tsconfig.json，它定义了应该如何解析模块。

这是 VSC 中的 linter 错误：

这里的答案缺少反应模块，但在我的情况下，它是我的本地模块——仍然，错误代码是相同的，这个解决方案在某些情况下可能会有所帮助。

要在 Visual Studio Code 中更改 TS 版本，您可以点击编辑器窗口底部的版本（截图中的 4.1.2）：

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

然后选择“使用工作区版本”：

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

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

【讨论】：

【解决方案2】：

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

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

在 VS2019 中修复它：（以管理员身份运行）

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

npm install @types/react

（不像你）我也有一个缺少 package.json 文件的问题，但我有一个 package-lock.json。我制作了 package-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。这是解决所有问题的最后一步。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

Cannot find module 'xxx'.ts(2307) 错误表示您的package.json 文件中列出的xxx 包不存在于您的node_modules 目录中，或者由于其他原因无法访问。

为了解决错误，请在命令行界面 (CLI) 中将目录更改为应用程序的根目录并运行 npm install xxx。

... 其中 xxx 是丢失包的名称；在这种情况下，React。

如果失败，您可能需要导航到 VS Code 的“工具”部分的“命令行”下的“PowerShell”以执行相同的操作。

【讨论】：

【解决方案5】：

我知道这是针对 VS Code 的，但删除 Deno 扩展的解决方案在 IntelliJ 上对我有用

【讨论】：

【解决方案6】：

我不确定，但我认为您只能在 .tsx 文件中使用 react。第一行也必须是

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

【讨论】：