Font-awesome: Cannot read property 'prefix' of undefined

[aledevbr]

Hello, first of all sorry for English, I'm using the google translator.
Well, I'm starting to use FontAwesome 5 Pro with Angular 5 and I'm having a hard time using the direct import of the icons (not the complete package).
When calling the command "ng serve -prod" it works perfectly, but when running only "ng-serve", that is, development environment, I'm getting the error "Can not read property 'prefix' of undefined."
I used "npm" to install the pro (token) packages as described at link
I also changed the tsconfig.js file and added the option "allowSyntheticDefaultImports": true in the "compilerOptions" block as recommended by some website (I can not remember which) so that ng recognizes the separate imports of the icons.

if I put just the following code, even without using the icon, the page already gives the error:

import fontawesome from '@fortawesome/fontawesome';
import faSquare from '@fortawesome/fontawesome-pro-solid/faSquare';

fontawesome.library.add(faSquare);

but if I change the import to:
import {faSquare} from '@fortawesome/fontawesome-pro-solid'
the error does not occur and everything works beautifully ...

[piuccio]

I'm having the same problem with react + jest + webpack

[piuccio]

@alesil-alexandre

change

import faSquare from '@fortawesome/fontawesome-pro-solid/faSquare';

to

import { faSquare } from '@fortawesome/fontawesome-pro-solid/faSquare';

[kevinwhoffman]

In 5.1.0, the packages were renamed so it should look like this:

import { faSquare } from '@fortawesome/pro-solid-svg-icons/faSquare';

Do NOT forget the curly brackets or you will get the prefix error.

[aledevbr]

Thanks.

[gsccheng]

The docs need to be updated to reflect this.

[haf]

The docs don't state how to do this for pro:

import { faSquare } from '@fortawesome/pro-solid-svg-icons/faSquare';

here https://fontawesome.com/how-to-use/on-the-web/using-with/react