v6 Named export 'faDiscord' not found

[alexcroox]

Describe the bug

"@fortawesome/fontawesome-svg-core": "1.3.0",
"@fortawesome/free-brands-svg-icons": "6.0.0",
"@fortawesome/free-solid-svg-icons": "6.0.0",
"@fortawesome/vue-fontawesome": "3.0.0-5",

Vue 3

<script setup lang="ts">
import { faDiscord, faPatreon, faTwitter } from '@fortawesome/free-brands-svg-icons'

[...]

<FontAwesomeIcon :icon="faDiscord" />

Oddly it works during development, just not build (using Vite)

import { faSteamSymbol, faDiscord, faTwitter, faPatreon } from "@fortawesome/free-brands-svg-icons";
                        ^^^^^^^^^
SyntaxError: Named export 'faDiscord' 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 { faSteamSymbol, faDiscord, faTwitter, faPatreon } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)

Screenshots

• SVG with JS
• Web Fonts with CSS
• SVG Sprites
• On the Desktop

Bug report checklist

• I have filled out as much of the above information as I can
• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

@robmadole since this only happens in development and it is related to Vue 3, is it possible that the issue belongs to the vue-fontawesome package?

[mcmxcdev]

Doesn't seem to be Vue specific. I just encountered this with SvelteKit:

[aaronleopold]

Same boat as @mhatvan, I am using sveltekit and pretty much got that same error. If I remove an icon, it just complains about the next one.

[d42ohpaz]

The faBackpack, faBuildings, and faComputerClassic are also missing.

[robmadole]

Can anyone provide a reproducible example for me? That would help a ton.

[alexcroox]

@robmadole since this only happens in development and it is related to Vue 3, is it possible that the issue belongs to the vue-fontawesome package?

To clarify, it's fine during development, it only happens when you come to bundle for production

[jasonlundien]

Hi @alexcroox ---

I am not able to reproduce this build error, and perhaps could use your help if you have a few minutes to spare here or there.

• I created a very short/simple Vue3 + Vite project here.
• I was able to import Font Awesome and use the icons as mentioned on our Vue3 npm page.
• I was able to npm run build (vite build) in my project --- the dist directory was created and no error messages popped in the console.

So if you get a chance, could you take a look and let me know what I am missing.

[fabianmossberg]

I get the same problem, with a bunch of icons, as well as the icon method.

I uploaded it in a repo that is stripped clean of anything but FontAwesome, you can find it here.

https://github.com/fabianmossberg/fontawesome-problem

[jasonlundien]

@fabianmossberg ---
Thank you for this... I will pull this down and work with it then!

[fabianmossberg]

@jasonlundien: One more thing.

It works perfectly if I do the following:

Edit the the following files:

node_modules/@fortawesome/fontawesome-svg-core/package.json
node_modules/@fortawesome/free-solid-svg-icons/package.json

By adding this:

"type": "module",

As suggested by this PR
#18720

But I assume that those files are generated by some other private repo, and that the change that is needed would be done there.

[fabianmossberg]

A workaround until the packages are shipped as esm is to fix it in the vite config.

In SvelteKit, edit svelte.config.js and add '@fortawesome/*' to kit.vite.ssr.noExternal

https://github.com/fabianmossberg/fontawesome-problem/blob/7357af392e3858b726520a95688bb2a82d9913e0/svelte.config.js#L4-L13

[robmadole]

All we are going to focus the conversation about type: "module" in the PR #19041