是什么原因導致 typescript Module has no exported member.ts(2305) 錯誤，如何解決？

Question

這是我第一次將 typescript 與 React 一起使用，我遇到了 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"
  },

當它出現時，我能做些什么來解決這個問題？ 我並不是在問這 3 個特定問題，而是如何解決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

重新啟動 typescript 服務器對我有用：

ctrl+shift+p > Typescript: Restart TS server （點回車）

Answer 2

對於實例 react-router-dom 版本 5，你的包 json 中沒有路由，版本 6 是帶有路由的版本。 在這里你可以找到更多信息https://reactrouter.com/web/guides/quick-start

Answer 3

這不是一般錯誤，而是非常具體的錯誤。 此錯誤告訴您您正在嘗試導入不存在的內容。

每個答案都取決於您要導入的內容。

• Routes不是react-router-dom的命名導出。 文檔中沒有任何地方是字符<Routes 。 我不知道你認為你在導入什么，但你可能想要別的東西。

• MaterialCommunityIcons不是react-native-vector-icons的命名導出。 根據文檔，您需要像這樣導入：

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

• useNavigate不是react-router的命名導出。 文檔列出了useNavigation 。 你的意思是要導入嗎？

如您所見，沒有一刀切的解決方案。 您必須查閱文檔並嘗試找到要導入的內容並確保您得到正確的內容。

Answer 4

如果您從 v5 升級並看到此問題，我能夠完全刪除@types/react-router-dom依賴項。 v6 的類型隨react-router-dom v6 一起提供， @types依賴項沒有受到影響。