Getting error when importing fontawesome icons

Question

I'm trying to build a simple website using Astro, it runs perfectly fine when using astro dev but I can't build the website using astro build because this happens:

The error I'm getting:

error   Named export 'faGithub' not found. The requested module '@fortawesome/free-brands-svg-icons' is a CommonJS module, which may not support all module.exports as named exports.
  CommonJS modules can always be imported via the default export, for example using:
  
  import pkg from '@fortawesome/free-brands-svg-icons';
  const { faGithub, faLinkedin, faDiscord } = pkg;

Here's my code:

import {
    faGithub,
    faLinkedin,
    faDiscord,
} from "@fortawesome/free-brands-svg-icons";

Here's my tsconfig.json file:

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "types": ["astro/client"]
    }
}

Answer 1

I have been trying to find a solution for this also.

Here is the related bug report: https://github.com/FortAwesome/Font-Awesome/pull/19041

For a quick try if you add "type":"module" into the node_modules/@fortawesome/free-brands-svg-icons/packages.json build works.

Fix will be included in the next release of the package as mentioned in the bug report. For now I use a dirty hack that changes the free-brand-svg-icons' packages.json file with sed before building.

Answer 2

Have you tried Astro Icons? Itś already optimized and you can import all icons from many libraries, including fontawesome as you can see at the icon sets