Question

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

TS linter一直说找不到模块'react'.ts（2307）我试过添加纱线@ types / react，添加纱线，重新启动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"
  ]
}

我尝试了添加纱线@ types / react，添加纱线，重新启动VScode等。

Answer 1

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

就我而言，错误是由 Visual Studio Code 使用全局/默认 TypeScript 版本而不是工作区/项目版本这一事实引起的。这很重要，因为 linter/编辑器没有选择定义模块应该如何解析的 tsconfig.json。

这是 VSC 中的 linter 错误：

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

要在 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"
  ]
}

Answer 2

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

Answer 3

我遇到了同样的问题，却发现了这个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。那是修复所有问题的最后一步。

Answer 4

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

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

Answer 5

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

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

... 其中 xxx 是缺失包的名称；在这个例子中，React。

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

Answer 6

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

找不到模块'react'.ts（2307）

6 个答案: