React js - 无法使用反应图标，找不到模块'../lib'

Posted 2023-03-23

【中文标题】React js - 无法使用反应图标，找不到模块\'../lib\'

【英文标题】：React js - Unable to use react-icons, Module not found '../lib'React js - 无法使用反应图标，找不到模块'../lib'

【发布时间】：2021-11-24 01:11:32

【问题描述】：

这是我在 *** 上的第一篇文章，所以我会尽量保持简短、亲切和详细，希望能找到一些帮助。

我目前正在尝试学习 React js，当我尝试安装 react-icons 并导入图标时，我的开发服务器崩溃了。

npm install react-icons package.json：

  "name": "ecostrategy",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.1.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.0-rc.0",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.0",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  ,

在我的代码中：

import  FaGithub  from "react-icons/fa";

npm run start 编译失败。

./node_modules/react-icons/fa/index.esm.js 未找到模块：无法解析 'D:\name\school\semester\class\project\node_modules\react-icons\fa' 中的 '../lib'

我也尝试过 npm install react-icons --save 并且基于错误说它无法解析 '../lib' 我什至只是猜测并尝试了 npm install lib，但没有成功。卸载并重新安装 react-icons 也没有帮助。

我删除了我的node_modules 文件夹并再次运行npm install，这并没有解决问题。运行npm install 后我的输出是：

添加了来自 789 个贡献者的 1987 个包，并在 103.053 秒内审核了 1990 个包153 个包正在寻找资金运行npm fund 了解详细信息发现 3 个中等严重性漏洞运行npm audit fix 来修复它们，或npm audit 了解详情

当我尝试npm audit fix 时，它会说无法自动解决它们，而npm fund 只给了我一个列表。

【问题讨论】：

尝试擦除您的node_modules 文件夹并在您的文件夹根目录运行npm install。然后检查问题是否仍然存在

@geralt0 我在上面更新了我的问题，不幸的是它仍然存在

在这个你使用import语句的文件中，它是位于你的项目的根目录下还是在src这样的文件夹中？

在运行npm run start 之前是否有构建步骤？如果是这样，您使用什么来构建项目（例如 babel、webpack 等）？

@geralt0 我正在使用LoginComponent.jsD:\name\school\semester\class\project\node_modulesD:\name\school\semester\class\project\src\components\LoginComponent.js中的import语句

【参考方案1】：

显然 react-icons v4.3.0 存在问题。看到这个问题：https://github.com/react-icons/react-icons/issues/490

解决办法是降级到v4.2.0。尝试在你的 package.json 中设置这一行：

"react-icons": "4.2.0",

然后删除node_modules 并再次运行npm install。

这基本上将react-icons 的版本“固定”到4.2.0。它永远不会安装另一个版本。因此，您需要密切关注包裹。我相信很快就会推出修复程序。之后，您可以将版本设置回"^4.3.0"（或"^4.4.0"，如果这是固定版本）并查看它是否已解决。

更新：显然这已在react-icons v4.3.1 中修复。所以你可以将 package.json 中的这一行设置回：

"react-icons": "^4.3.1",

【讨论】：

成功了！！这是解决方案，我很惊讶。非常感谢，我确实在互联网上搜索了几个小时，但找不到类似的问题。真是太棒了，感谢您抽出宝贵的时间，让我在 *** 上的第一篇文章成为一次很棒的体验 :)

该问题仅在 11 小时前发布。它可能还没有出现在搜索引擎上。如果您将来遇到特定包的类似问题，请访问该包的 github 页面并搜索问题（如果您没有找到，请尝试搜索已关闭的问题）。有时您会找到从 Google 或 *** 找不到的答案。

很可能其他人也会遇到同样的问题并在这里找到您的问题。您很不幸成为第一个提出问题的人：）但是感谢您提出问题；它会帮助其他人，直到维护者修复它！

这太有趣了。那里有非常有价值的信息，老实说，我什至不会想到这一点。非常感谢您的指导，我今天确实学到了很多东西！