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

Question

This is my first post on stackoverflow so I will try my best to keep it short, sweet, and detailed enough to hopefully find some assistance.

I'm currently trying to learn React js and when I try to install react-icons and import an Icon, my dev server is just crashing.

1. 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"
  },

2. In my code I put:

import { FaGithub } from "react-icons/fa";

3. npm run start Failed to compile.

./node_modules/react-icons/fa/index.esm.js
Module not found: Can't resolve '../lib' in 'D:\name\school\semester\class\project\node_modules\react-icons\fa'

4. I've also tried npm install react-icons --save and based on the error saying it can't resolve '../lib' I even just took a guess and tried npm install lib which didn't work. Uninstalling and reinstalling react-icons didn't help either.

5. I deleted my node_modules folder and ran npm install again, this didn't fix the problem. My output after running npm install was:

added 1987 packages from 789 contributors and audited 1990 packages in 103.053s

153 packages are looking for funding
run npm fund for details

found 3 moderate severity vulnerabilities
run npm audit fix to fix them, or npm audit for details

When I try npm audit fix it says something about not being able to solve them automatically, and npm fund gives me just a list.

Answer 1

Apparently there's a problem with react-icons v4.3.0. See this issue: https://github.com/react-icons/react-icons/issues/490

The solution is to downgrade to v4.2.0. Try setting this line in your package.json:

"react-icons": "4.2.0",

Then remove node_modules and run npm install again.

This essentially "pins" the version of react-icons to 4.2.0 . It will never install another version. So, you'll want to keep an eye on the package. I'm sure a fix will be pushed soon. After that you can set the version back to "^4.3.0" (or "^4.4.0" if that's the fixed version) and see if it's resolved.

UPDATE: Apparently this has been fixed in react-icons v4.3.1. So you can set this line in package.json back to:

"react-icons": "^4.3.1",