找不到模塊 'react'.ts(2307)

Question

我正在嘗試使用 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 等。

Answer 1

解決方案：我必須手動更改應使用的 TS 版本編輯器 (VSC)。 以下說明（2021 年 1 月生效）。

在我的情況下，錯誤是由 Visual Studio Code 使用全局/默認 TypeScript 版本而不是工作區/項目版本這一事實引起的。 這很重要，因為tsconfig.json /編輯器沒有選擇定義模塊應該如何解析的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 問題沒有答案。 我想我會分享我的解決方案。 也許對你來說也是一樣。 如果沒有，也許它可以幫助其他人：

對我來說，奇怪的是，是因為我沒有正確安裝反應，或者它已經過時了什么的。

在 VS2019 中修復它：（以管理員身份運行）

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

npm install @types/react

（與您不同）我也遇到了缺少 package.json 文件的問題，但我有一個 package-lock.json。 我備份了 package-lock.json 並將其重命名為 package.json 並再次執行npm install @types/react並開始解析依賴項。

我還有其他一些錯誤消息，比如“需要 React@^16 的對等方，但沒有安裝”……我發現了另一個解決其余問題的 S/O 問題： react-router-dom@4.0.0 需要一個對等方react@^15 但沒有安裝。 您必須自己安裝對等依賴項

后來同事指出，其實有一個package.json文件，只是在不同的文件夾里。 我需要 cd 到該文件夾​​並運行npm install 。 那是修復一切的最后一步。

Answer 4

Cannot find module 'xxx'.ts(2307)錯誤表示package.json文件中列出的xxx包不在node_modules目錄中，或者由於其他原因無法訪問。

為了解決該錯誤，請在命令行界面 (CLI) 中將目錄更改為應用程序的根目錄並運行npm install xxx 。

... 其中 xxx 是丟失包的名稱； 在這種情況下，React。

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

Answer 5

我知道這是針對 VS Code 的，但是刪除 Deno 擴展的解決方案在 IntelliJ 上對我有用

Answer 6

我在這里遇到了同樣的問題，但這是因為我手動重命名了整個 react 項目所在的文件夾。

我唯一要做的就是重新運行 pnpm pnpm install / npm install

Answer 7

對我有什么幫助 - 只需關閉編輯器並再次打開它：）

Answer 8

我不確定，但我認為您只能在.tsx文件中使用 react。 第一行也必須是

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