Bug: Cannot find module or its corresponding type declarations when importing font awesome pro icons

[DevLaka]

Bug description

I'm currently working on a React TypeScript project where I initially used Font Awesome free icons. However, I've realized the need to improve the aesthetics by incorporating Font Awesome Pro icons. Transitioning to Font Awesome Pro might not be as straightforward as I initially thought.

I've set up Font Awesome Pro following the documentation provided here:
Font Awesome Docs

Here are the steps I followed:

1. Created a Kit Package:

Icons: pro
Technology: SVG
Subset: Auto-subsetting
Styles: All styles
Features: Enable NPM download and Enable compatibility with older versions

2. Created a .npmrc file in the folder where package.json exists. .nmprc File Contents:

@awesome.me:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

3. Installed below packages.

npm install --save @awesome.me/kit-KIT_CODE@latest
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @awesome.me/kit-KIT_CODE
npm i --save @fortawesome/react-fontawesome@latest

4. Attempted to import icons to a React component using the following code:

import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'

However, I'm encountering an error stating: "Module '@awesome.me/kit-code/icons/classic/solid/' or its corresponding type declarations cannot be found.

Also, I noticed that the index.d.ts file in the @awesome.me node module exports an empty object.

Font Awesome version

v6

Serving

Kit

Implementation

SVG+JS

Browser and Operating System

• Chrome version 122 on Windows 10

[DevLaka]

Add "moduleResoluction": "bundler" within the compilerOptions object in the tsconfig.json file like below.

    {
      "compilerOptions": {
        "moduleResolution": "bundler"
      },
    }

It's disappointing that this isn't mentioned in any Font Awesome documentation.

[robmadole]

We'll get it added. Thanks for letting us know how you solved it.

[jamesarosen]

https://docs.fontawesome.com/web/use-with/react/use-with#typescript would be a great place for this