React + FontAwesome + Bootstrap - reactjs

Question

I am attempting to learn React and Bootstrap at the same time. I am a beginner.
My issue is that I am trying to display a FontAwesome icon within a React application using the FontAwesome component. I have a Pro license for FontAwesome and have followed their directions on setting up the dependencies. My package.json contains the following:
"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"
},
When I attempt to use an icon in a component like below:
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
I get an error:
Error: Cannot find module '#fortawesome/free-solid-svg-icons'
When I review the error bodies below the header they all seem to point to 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;
I have looked through my project which is still small because I am just beginning and I can't find any reference to the Free icons for FontAwesome. I am at a loss and not sure what to even ask. Is there a reference to the free icons within the Bootstrap React component?

Answer 1

According to FontAwesome's React documentation, you need to install #fortawesome/free-solid-svg-icons, too, before adding additional styles.
Run npm i --save #fortawesome/free-solid-svg-icons and try again.