issue installing react icons with npm

Question

I'm following a react tutorial on lynda.com. I'm trying to install react icons through npm to my react project. I'm getting some weird warnings in the command line that I don't understand. Here's the result in the tutorial vs. my result:

This is the tutorial's result the terminal.

This is my result in the terminal:

Last login: Sat Aug 11 11:54:48 on ttys005
dashiell-bark-husss-macbook-pro-2:bulletin-board dashiellbark-huss$ npm install --save react-icons
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/.bin/jest as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/jest
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/.bin/uglifyjs as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/uglify-js
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/html-minifier/node_modules/.bin/uglifyjs as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/html-minifier/node_modules/uglify-js
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/fsevents/node_modules/.bin/node-pre-gyp as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/fsevents/node_modules/node-pre-gyp
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/.bin/esparse as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/esprima
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/.bin/esvalidate as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/esprima
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/espree/node_modules/.bin/acorn as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/espree/node_modules/acorn
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/.bin/browserslist as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/browserslist
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/autoprefixer/node_modules/.bin/browserslist as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/autoprefixer/node_modules/browserslist
npm notice created a lockfile as package-lock.json. You should commit this file.
+ react-icons@3.0.5
added 1 package and removed 1311 packages in 10.061s
dashiell-bark-husss-macbook-pro-2:bulletin-board dashiellbark-huss$

Here's a screen shot which may be easier to view:

Now, when I try to use icons, I get this error:

./src/Note.js
Module not found: Can't resolve 'react-icons/lib/fa/pencil' in '/Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/src'

I'm guessing this error is related to what the command line showed me when I tried to install the icons.

I'm very new to react and npm, so I'm looking for some guidance on why this isn't acting as expected and how to fix this?

Update:

I'm now getting a different error:

Module build failed: Error: ENOENT: no such file or directory, open '/Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/react/index.js'

I ran npm outdated in the terminal and found some weird results: it looks like npm thinks react, react-dom, and react-script are missing. Honestly this is a bit over my head and I don't know what it means but that looks wrong.

dashiell-bark-husss-macbook-pro-2:bulletin-board dashiellbark-huss$ npm outdated
Package        Current  Wanted  Latest  Location
react          MISSING  16.4.2  16.4.2  bulletin-board
react-dom      MISSING  16.4.2  16.4.2  bulletin-board
react-scripts  MISSING   1.1.4   1.1.4  bulletin-board

I went into my package.json file and saw that those all have a caret symbol infront of them:

"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-icons": "^3.0.5"

Full package.json file contents:

{
  "name": "bulletin-board",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-icons": "^3.0.5",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

2nd Update: An per user Win's suggestion I ran npm install. This changed some things.

This was the result in the command line:

dashiell-bark-husss-macbook-pro-2:bulletin-board dashiellbark-huss$ npm install
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump

> fsevents@1.2.4 install /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/fsevents
> node install

[fsevents] Success: "/Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.

added 1298 packages and updated 88 packages in 24.848s

Now, If I use the syntax import { FaPencil } from 'react-icons/fa' to import, my page compiles but with these warnings :

./src/Note.js
  Line 2:  'FaPencil' is defined but never used  no-unused-vars
  Line 3:  'FaTrash' is defined but never used   no-unused-vars:

But if I use the syntax import FaPencil from 'react-icons/lib/fa/pencil' to import, my page does not compile and I get this error:

./src/Note.js
Module not found: Can't resolve 'react-icons/lib/fa/pencil' in '/Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/src'

Update 3: After fixing a syntax error, I now get a different error

'react-icons/fa' does not contain an export named 'FaPencil'.

npm version 5.6.0

Have you tried writing `import { FaPencil } from 'react-icons/fa';` instead? — Tholle, Aug 11 '18 at 19:34
Somehow I'm getting a different error _with or without_ the import statement you suggested. My error is now `./node_modules/react/index.js Module build failed: Error: ENOENT: no such file or directory, open '/Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/react/index.js'` — Dashiell Rose Bark-Huss, Aug 11 '18 at 19:43
I don't think I have that file in this project, does that make any sense? It doesn't look like the example exercise files from the tutorial have them either. — Dashiell Rose Bark-Huss, Aug 11 '18 at 20:15
@Dashiell can you paste your project files mainly your application file? Might be because you're using Create React App? Paste your entire package.json file — Win, Aug 11 '18 at 20:21
@DashiellRoseBark-Huss actually it looks like you've not installed your initial install of node modules, can you run npm install and tell us the result? — Win, Aug 11 '18 at 20:29
@Win thanks, I updated my post with more info on what happened after running npm install — Dashiell Rose Bark-Huss, Aug 11 '18 at 21:59
I ended up finding a webpack.config.js file, should I share that? — Dashiell Rose Bark-Huss, Aug 12 '18 at 05:41
@DashiellRoseBark-Huss Thanks! you were missing a base installation, I've added the answer you're looking for below. — Win, Aug 12 '18 at 16:34

score 2 · Accepted Answer · answered Aug 12 '18 at 16:34

2

You're trying to access a paid icon. You will have to use the free pencil icon:

import { FaPencilAlt } from 'react-icons/fa';

and then use it like so

<FaPencilAlt/>

You can find a list of icons you can use here: https://fontawesome.com/icons?d=gallery&q=Pencil

Anything marked as PRO will not be available.

answered Aug 12 '18 at 16:34

Win

5,498
2
15
20

I can't believe this is the solution! I wonder why my lynda tutorial didn't think to address that the viewers probably don't have access to paid icons. thank you so much! – Dashiell Rose Bark-Huss Aug 12 '18 at 17:26
1

@DashiellRoseBark-Huss Glad it's sorted! – Win Aug 12 '18 at 17:33
@DashiellRoseBark-Huss Strange. I'm viewing the same tutorial. The FaTrash icon works as she describes but the pencil fails unless I used the suggestion above. Wouldn't there be a FaTrashAlt as well? – Jim Castro Mar 04 '20 at 05:35

score -1 · Answer 2 · answered Jan 30 '22 at 20:16

-1

I found it quite difficult to install react-icons as well, a fix for me was to simply uninstall and install node.js again. This worked fine for me.

answered Jan 30 '22 at 20:16

Katleho

1
1

issue installing react icons with npm

2 Answers2