React js - Unable to use react-icons, Module not found '../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.

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

In my code I put:

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

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'

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.
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.

Try wiping your `node_modules` folder and run `npm install` at root of your folder. Then check if the issue persists — geralt0, Oct 03 '21 at 04:49
@geralt0 I updated my issue above, unfortunately it still persists — Chiken, Oct 03 '21 at 05:01
In this file that you are using the import statement, is it located at the root of your project or in a folder such as `src`? — geralt0, Oct 03 '21 at 05:03
Is there a build step before you run `npm run start`? If so, what are you using to build the project (e.g. babel, webpack, etc)? — Cully, Oct 03 '21 at 05:05
@geralt0 I am using the import statement in `LoginComponent.js` `D:\name\school\semester\class\project\node_modules` `D:\name\school\semester\class\project\src\components\LoginComponent.js` — Chiken, Oct 03 '21 at 05:06
@Cully If I understood the react tutorial correctly... I'm not currently building and deploying this project (?) That would be creating a build folder. I am running this locally on a developer server deployment. — Chiken, Oct 03 '21 at 05:10
What gets run by `npm run start`? Are you using something like create-react-app or Next.js? — Cully, Oct 03 '21 at 05:11
@Cully This is what you're looking for, I think `"start": "react-scripts start",` is what's in my `package.json` — Chiken, Oct 03 '21 at 05:12
Btw, yes, that's what I was hoping to find (`react-scripts start`). Looks like you are using create react app. — Cully, Oct 03 '21 at 05:14

Cully · Accepted Answer · 2021-10-04T04:41:22.203

2

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",

edited Oct 04 '21 at 04:41

answered Oct 03 '21 at 05:19

Cully

6,427
4
36
58

2

It worked!! This is the solution, I'm amazed. Thank you SO much, I literally was searching the internet for hours and couldn't find a similar issue. Truly amazing, thank you for taking the time and making my first post on Stackoverflow a great experience :) – Chiken Oct 03 '21 at 05:27
The issue was only posted 11 hours ago. It probably hasn't shown up on search engines yet. If you encounter something like this in the future for a specific package, visit the github page for the package and search the issues (try searching the closed issues too if you don't find something). Sometimes you'll find answers you wouldn't find from Google or Stackoverflow. – Cully Oct 03 '21 at 05:29
2

It's likely other people will have this same issue and find your question here. You were just unlucky enough to be the first person to ask :) But thanks for posting a question; it will help others until the maintainers fix it! – Cully Oct 03 '21 at 05:30
How funny is that. Very valuable information right there, I wouldn't have even thought of that to be honest with you. I really appreciate the guidance, I've definitely learned a lot today! – Chiken Oct 03 '21 at 05:31

React js - Unable to use react-icons, Module not found '../lib'

1 Answers1