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"]
    }
}

score 3 · Answer 1 · answered Jul 30 '22 at 07:20

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.

score 0 · Answer 2 · answered Dec 12 '22 at 13:19

0

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

answered Dec 12 '22 at 13:19

Marcio Sales

37
2

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/33396877) – node_modules Dec 16 '22 at 12:05

score 0 · Answer 3 · answered Jul 14 '23 at 09:28

I also had a similar issue, I used fontawesome icon in the component library built by Vite and the package.json -> type:'module' declaration was missing after compiling at packaging time.

If you use it in the component library, you can solve it by adding external: [..., '@fortawesome/vue-fontawesome', '@fortawesome/free-solid-svg-icons'] to the vite/rollup build options

Getting error when importing fontawesome icons

3 Answers3