5

我正在尝试使用 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 等。

4

6 回答 6

8

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

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

这是 VSC 中的 linter 错误： 短绒错误：

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

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

编辑器窗口中的 TypeScript React，版本 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"
  ]
}
于 2021-01-22T22:33:59.220 回答
2

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

于 2020-07-24T20:14:01.967 回答
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 需要一个对等体react@^15 但没有安装。您必须自己安装对等依赖项

后来有同事指出其实是有个package.json文件，只不过是在不同的文件夹下。我需要 cd 到该文件夹​​并运行npm install. 这是解决所有问题的最后一步。

于 2020-03-09T16:42:15.773 回答
1

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

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

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

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

于 2020-12-26T10:41:22.377 回答
0

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

于 2021-05-04T20:00:22.503 回答
-3

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

import * as React from "react";
import { Component } from 'react';
于 2019-07-10T08:00:57.977 回答