React + FontAwesome + Bootstrap

Posted 2023-02-21

【中文标题】React + FontAwesome + Bootstrap

【英文标题】：

【发布时间】：2021-11-10 00:38:20

【问题描述】：

我正在尝试同时学习 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”

当我查看标题下方的错误正文时，它们似乎都指向引导程序。

__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 的免费图标的参考。我有点不知所措，甚至不确定要问什么。 Bootstrap React 组件中是否有对免费图标的引用？任何帮助将不胜感激，并为成为 NOOB 感到抱歉。

【参考方案1】：

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

运行npm i --save @fortawesome/free-solid-svg-icons，然后重试。

【讨论】：

谢谢。就是这样。我认为我不需要它，因为对我来说，文档显示您安装了您想要使用的任何图标包。我显然没有读对。非常感谢您的帮助。