我正在尝试使用ReactJS与font-awesome,但我得到一个模块未找到错误.文件在npm模块文件夹,所以我不知道是什么出了问题.
我的package.json中包含以下内容:
{
"name": "partner-portal",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4"
}
}
我已经运行了以下命令,并且库已经添加到我的npm_modules
文件夹中:
yarn add @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
yarn add @fortawesome/react-fontawesome@latest
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
但是当我这样把它包括进去的时候:
import { faBell } from "@fortawesome/free-regular-svg-icons"
function Form() {
return(
<div className='container w-[1000px] p-5 mx-auto border rounded-2xl'>
<div className='flex flex-wrap'>
<label className="mr-5">Name</label>
</div>
<div className='flex flex-row w-full justify-end'>
<button className="pointer-events-auto ml-8 rounded-md bg-indigo-600 py-2 px-3 text-[0.8125rem] font-semibold leading-5 text-white hover:bg-indigo-500">
<FontAwesomeIcon icon={faBell} />
Save
</button>
</div>
</div>
)
}
export default Form;
出现以下错误:
Uncaught Error: Cannot find module '@fortawesome/free-regular-svg-icons'
webpackMissingModule bundle.js:214
js bundle.js:214
factory react refresh:6
Webpack 11**
谁能告诉我我做错了什么?
编辑:
现在我继续前进,我尝试使用ReactRouter,我已经用下面的命令npm i react-router
安装了它。正如你可以从我更新的package.json
中看到的,我有react-dom,react-router,react-router-config,react-router-dom在那里。我运行npm install
,没有遇到任何问题。但是当我尝试:
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router"
我仍然得到同样的错误。Uncaught Error: Cannot find module 'react-router'
同样,文件在node_modules文件夹中。我做错了什么??!
2条答案
按热度按时间6pp0gazn1#
您只需要安装、
删除所有其他代码并使用下面的代码,
对我来说很有效!!
kkih6yb82#
首先安装“SVG核心”图标
或
然后选择您喜欢的“图标包”(实体、品牌、常规)
国家预防机制:
Yarn
如果不执行其他步骤:https://fontawesome.com/docs/web/use-with/react/add-icons
如果你使用的是Docker,请重新启动容器。
字体:https://fontawesome.com/docs/web/use-with/react/