package doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

[cor]

Describe the bug
@fortawesome/fontawesome-free doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.
I'm using FontAwesome in my sveltekit app, and using vite v2.7.3. There I get this error message

To Reproduce

1. Create a new sveltekit project:

npm init svelte@next my-app
cd my-app
npm install

2. add @fortawesome/fontawesome-free as a dependency
3. run npm run build

Expected behavior
The error should not show up and it should be a valid es module

Version and implementation
Version:
"@fortawesome/fontawesome-free": "^5.15.4",
"@sveltejs/kit": "1.0.0-next.202"
vite v2.7.3

• 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

[AqueleHaru]

same here.

[nurdism]

this is when using vitejs

[OutlierSeeker]

I had the same problem after installing it on a fresh svelte-kit/electron template (https://github.com/Dax89/electron-sveltekit).

[iandoesallthethings]

I have multiple projects getting this same warning.

[fabianmossberg]

Me too. I also have problems with the icon method.

import { icon } from "@fortawesome/fontawesome-svg-core";
         ^^^^
SyntaxError: Named export 'icon' not found. The requested module '@fortawesome/fontawesome-svg-core' 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/fontawesome-svg-core';
const { icon } = pkg;

I put it in an isolated repo here:
https://github.com/fabianmossberg/fontawesome-problem

[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

[dbaynard]

@fabianmossberg Glad you got it working; I made #18720 a month ago and it hasn’t been triaged, so I’m not expecting a prompt fix.

[fabianmossberg]

@fabianmossberg Glad you got it working; I made #18720 a month ago and it hasn’t been triaged, so I’m not expecting a prompt fix.

I would guess that the files in the js-packages folder are coming from some private repos that the FontAwesome team are handling, so the fix needs to be done in their repos, not in this one.

[cimchd]

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

Same in vite with vue. It seems that ssr/ssg is the problem. The font awesome packages gets detected as commonjs modules. From the fontawesome project you can try to adjust the esm exports to be compatible with vite's automatic detection. Or maybe vite will improve its autodetection in the future.
Meanwhile @fabianmossberg's answer also works for vite with vue:

// vite.config.ts
export default defineViteConfig({
  // ...
  ssr: {
    noExternal: ['@fortawesome/*'],
  },
});

[GuilleDF]

I'd argue this is a duplicate of #16439, right?

[rdela]

See also #18075, #18677

[Jabronironi]

It appears the vite configuration no longer has the ssr: noExternal option. This is using vite 2.9.14. I see this comment in the index.d.ts file:

/* Excluded from this release type: ssr */

[cascading-jox]

I tried using the "All The Things" installation method and imported the js using the esm import syntax (import '@fortawesome/fontawesome-pro/js/solid.js';) and I still get that error on 6.2.0 using sveltekit. Am I importing the .js correctly?

The error:
@fortawesome/fontawesome-pro doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

Using the "Certain Specific Things" installation works as expected.

[tagliala]

Am I importing the .js correctly?

I may be wrong, but using svelte and other JS frameworks with the Font Awesome JS+SVG implementation should require a different approach

There is a quite new svelte component that should be used for this use case. You may find more information at https://github.com/FortAwesome/svelte-fontawesome and examples

[rdela]

think you can import normally (no workaround needed) now since #19041
#19041 (comment)

[harryqt]

As of FA 6.2.0 and Vite, I still have the warning.

[schlichtanders]

I am also on 6.2.0 and seeing the same warning. Please reopen this issue

[tagliala]

Any chance to provide a reproducible test case?

Please provide as many information as possible (version of FA, how it is imported, version of Vite). Even better if it is possible to provide a reduced test case hosted on github

[harryqt]

@tagliala you can clone this repo Dibbyo456/fa-bug-report to reproduce.