问题
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
回答1:
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.
来源：https://stackoverflow.com/questions/51803053/issue-installing-react-icons-with-npm