是什么导致打字稿模块没有导出的成员.ts(2305)错误以及如何修复它？

Question

这是我第一次在 React 中使用 typescript，我遇到了 typescript 错误带来的巨大麻烦Module has no exported member .ts(2305)。以下是发生这种情况的 2 个示例：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

错误：

'"react-router-dom"' has no exported member named 'Routes'. Did you mean 'Route'?ts(2724)

和这里

import { useNavigate } from 'react-router';

错误：

Module '"react-router"' has no exported member 'useNavigate'.ts(2305)

最后一个例子：

import { MaterialCommunityIcons } from 'react-native-vector-icons';

错误：

Module '"react-native-vector-icons"' has no exported member 'MaterialCommunityIcons'.ts(2305)

这是我的 package.json 文件（如果有帮助的话）：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/history": "2.0.45",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router": "3",
    "@types/react-router-dom": "^5.1.8",
    "community": "^0.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "history": "^5.0.1",
    "icons": "^1.0.0",
    "material": "^0.4.3",
    "prettier": "^2.3.2",
    "react": "^17.0.1",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.1",
    "react-native-vector-icons": "^8.1.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-vector-icons": "^0.0.1",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },

当这个问题出现时，我可以做什么来解决这个问题？我并不是在问这三个特定问题，而是在问如何解决该Module has no exported member .ts(2305)错误，因为它似乎经常出现。

我读过几次并尝试做的是安装类型定义（我认为？），如下所示：

yarn add @types/react-router-dom最后yarn add @types/react-router，yarn add @types/react-native-vector-icons简单地尝试yarn install但这从未解决问题。

Answer 1

如果您从 v5 升级并看到此问题，我删除了@types/react-router-dom依赖项并修复了此问题，因为 v6 的类型随react-router-dom. 依赖关系@types本身并没有从 v5 中删除。

Answer 2

重新启动打字稿服务器对我有用：

ctrl+shift+p> Typescript: Restart TS server（点击进入）

Answer 3

好吧，例如，react-router-dom 版本 5 中的 json 包中没有路由，而版本 6 则包含路由。在这里您可以找到更多信息https://reactrouter.com/web/guides/quick-start

Answer 4

这不是一个一般性的错误，而是一个非常具体的错误。此错误告诉您您正在尝试导入不存在的内容。

每个问题的答案取决于您要导入的内容。

• Routes不是 的命名导出react-router-dom。文档中没有任何字符<Routes。我不知道你认为你要导入什么，但你可能想要别的东西。

• MaterialCommunityIcons不是 的命名导出react-native-vector-icons。根据文档，您需要像这样导入：

  import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
  

• useNavigate不是 的命名导出react-router。文档列出了useNavigation. 您的意思是导入它吗？

正如您所看到的，没有一种万能的解决方案。您必须查阅文档并尝试找到您想要导入的内容并确保您获得正确的内容。