未捕获错误：找不到模块“@fortawesome/free-regular-svg-icons”

Question

我正在尝试将 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 文件夹中。我做错了什么？？？！

Answer 1

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

我遇到了类似的问题，并通过运行上述命令解决了它，然后我停止了脚本并执行了 npm start 并修复了错误。我希望这有帮助。

Answer 2

您只需安装即可，

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

删除所有其他并使用以下代码，

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBell } from '@fortawesome/free-solid-svg-icons'

function App() {
    return (
        <>
            <FontAwesomeIcon icon={faBell} />
        </>
    )
}

为我工作！！

Answer 3

首先安装“SVG Core”图标

npm i --save @fortawesome/fontawesome-svg-core

或

yarn add @fortawesome/fontawesome-svg-core

然后选择你喜欢的“图标套餐”（纯色、品牌、普通）

NPM：

# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

纱线

# Free icons styles
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

如果不执行另一步骤：https://fontawesome.com/docs/web/use-with/react/add-icons

如果你正在使用docker。重新启动容器。

字体：https://fontawesome.com/docs/web/use-with/react/

Answer 4

我遇到了类似的问题，我按照网站上的步骤操作，但不断收到错误。

我的问题是，当我的构建运行时，我在另一个终端中安装了 fontawesome 依赖项，所以我没有得到任何反馈。

在错误发生后重新启动构建时，我终于得到了反馈，即我安装的依赖项的版本对于我正在使用的 React Native 版本来说是最新的，我还得到了一行代码来运行以获得正确的版本

Answer 5

对我来说，这个解决方案有效。

1. 删除node_modules内的@fortawesom文件夹
2. 如果它们已经在 package.json 中，请通过 npm i 再次安装

Answer 6

首先安装反应图标

npm install react-icons --save

然后测试你的图标

import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
 render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}

更多图标请访问

https://react-icons.github.io/react-icons/