Issue compiling Font Awesome

[annamirakk]

I'm trying to use Fontawesome icons using these steps: https://fontawesome.com/how-to-use/on-the-web/using-with/react and it fails to compile.

I see the following in the terminal: ` ERROR Failed to compile with 1 errors 7:23:46 PM

This relative module was not found:

• ./../../next/node_modules/webpack/buildin/global.js in ./node_modules/@fortawesome/react-fontawesome/index.es.js TypeError: Cannot read property '1' of null at /var/www/html/frontend/node_modules/next/dist/server/on-demand-entry-handler.js:127:58 at Array.map () at Compiler. (/var/www/html/frontend/node_modules/next/dist/server/on-demand-entry-handler.js:126:12) at Compiler.applyPlugins (/var/www/html/frontend/node_modules/tapable/lib/Tapable.js:61:14) at Watching._done (/var/www/html/frontend/node_modules/next/node_modules/webpack/lib/Compiler.js:104:17) at onCompiled (/var/www/html/frontend/node_modules/next/node_modules/webpack/lib/Compiler.js:54:18) at applyPluginsAsync.err (/var/www/html/frontend/node_modules/next/node_modules/webpack/lib/Compiler.js:514:14) at next (/var/www/html/frontend/node_modules/tapable/lib/Tapable.js:202:11) at Compiler. (/var/www/html/frontend/node_modules/next/node_modules/webpack/lib/CachePlugin.js:78:5) at next (/var/www/html/frontend/node_modules/tapable/lib/Tapable.js:204:14)`

and this error on the frontend: Error in ./../next/node_modules/webpack/buildin/global.js Module build failed: Error: ENOENT: no such file or directory, open '/var/www/html/frontend/node_modules/next/node_modules/webpack/buildin/global.js'

Can someone please help resolve this or hint at an alternative solution to use Fontawesome icons? Thanks!

[jacobmishkin]

Hi Anna,

not sure about this error, did you use yarn to install the package? to get fontawesome up and working you need to yarn install all the packages

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome

then in your component import the icons:

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

then inside your component you can access the icons like so:

<FontAwesomeIcon icon={faCoffee} />

this example shows a coffee icon.

I hope this helps.

[edelinpetrov]

What @jacobmishkin said, but according to the docs you might what to add the icons to the library

import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(faCoffee);

and then use the icon

<FontAwesomeIcon icon={['fas', 'coffee']} />

If your icons appear large in scale when reloading the page-- import {config} from the core as well and remove the autoloaded css. config.autoAddCss = false; This was the case for me when using styled components.