Why ``module build failed`` error when trying to use fontawesom icons in my react project?

Question

I am following the fontawesome documentation on how to add icons with react. https://fontawesome.com/v6/docs/web/use-with/react/add-icons

I have added babel.config.js and babel-plugin-macros.config.js files in my root directory. Code for both of those file could be viewed in the documentation link attached.

I am getting the error as:

ERROR in ./src/index.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured
for various types of caching, using the first param of their handler functions:

i added api.cache(true) in my babel.config.js file but still the error persists.

Can anyone identify why this error is showing up?

Answer 1

I had the same issue, if you used create-react-app you could try ejecting the project and following the steps (I failed), but the way I got it to work is to follow https://fontawesome.com/v6/docs/web/use-with/react/

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

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGear } from '@fortawesome/free-solid-svg-icons';
const gearIcon = <FontAwesomeIcon icon={faGear} />
...
render(<> {gearIcon} </>);