反应 + FontAwesome + Bootstrap

Question

我正在尝试同时学习 React 和 Bootstrap，所以如果这个问题看起来像是一个完全的 NOOB 问题，我很抱歉。

我的问题是我正在尝试使用 FontAwesome 组件在 React 应用程序中显示 FontAwesome 图标。我有 FontAwesome 的 Pro 许可证，并按照他们的指示设置依赖项。我的 package.json 包含以下内容：

"dependencies": {
    "@fortawesome/fontawesome-pro": "^5.15.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.33-beta1",
    "@fortawesome/pro-regular-svg-icons": "^6.0.0-beta1",
    "@fortawesome/react-fontawesome": "^0.1.15",
    "@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": "^1.6.3",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },

当我尝试在如下组件中使用图标时：

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser } from "@fortawesome/pro-regular-svg-icons";

function Header(){
    return (
        <header>
            <h1>My Header</h1>
            <FontAwesomeIcon icon={faUser} color="red" size="6x" />
        </header>
    )
}

export default Header

我收到一个错误：

错误：找不到模块“@fortawesome/free-solid-svg-icons”

当我查看 header 下面的错误主体时，它们似乎都指向 bootstrap。

__webpack_require__
C:/work/RTS/rts_react/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
fn
C:/work/RTS/rts_react/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
C:/work/RTS/rts_react/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
fn
C:/work/RTS/rts_react/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
C:/work/RTS/rts_react/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
fn
C:/work/RTS/rts_react/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
C:/work/RTS/rts_react/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
fn
C:/work/RTS/rts_react/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:1069:18
__webpack_require__
C:/work/RTS/rts_react/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
checkDeferredModules
C:/work/RTS/rts_react/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
C:/work/RTS/rts_react/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;

我查看了我的项目，它仍然很小，因为我才刚刚开始，我找不到任何对 FontAwesome 免费图标的引用。我有点不知所措，甚至不能 100% 确定要问什么。 Bootstrap React 组件中是否有对免费图标的引用？任何帮助将不胜感激，并为成为 NOOB 感到抱歉。

Answer 1

根据 FontAwesome 的 React 文档，在添加其他样式之前，您还需要安装 @fortawesome/free-solid-svg-icons。

运行 npm i --save @fortawesome/free-solid-svg-icons 再试一次。

反应 + FontAwesome + Bootstrap

React + FontAwesome + Bootstrap

font-awesome

reactjs

react-bootstrap