Dependency issue with fortawesome building svelte-kit

[bostondevin]

When I include the editor in my svelte-kit typescript project and build the project, I get the following error. It seems like it can't find the fortawesome dependency. Not sure if it helps to add the the typescript definition described here: svelte-fa work work with sveltekitvite

`file:///Users/mcqdevin/Documents/GitHub/bare-svelte/.svelte-kit/output/server/entries/pages/configurations/index.svelte.js:22
import { faExclamationTriangle, faAngleDown, faSortAmountDownAlt, faFilter, faSearch, faUndo, faRedo, faTimes, faCaretDown, faPen, faCut, faCopy, faPaste, faClone, faCropAlt, faCaretSquareUp, faCaretSquareDown, faCaretRight, faEllipsisV, faAngleRight, faCircleNotch, faChevronDown, faChevronUp, faCode, faWrench, faCheck, faCog } from "@fortawesome/free-solid-svg-icons";
^^^^^^^^^^^
SyntaxError: Named export 'faAngleDown' not found. The requested module '@fortawesome/free-solid-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-solid-svg-icons';
const { faExclamationTriangle, faAngleDown, faSortAmountDownAlt, faFilter, faSearch, faUndo, faRedo, faTimes, faCaretDown, faPen, faCut, faCopy, faPaste, faClone, faCropAlt, faCaretSquareUp, faCaretSquareDown, faCaretRight, faEllipsisV, faAngleRight, faCircleNotch, faChevronDown, faChevronUp, faCode, faWrench, faCheck, faCog } = pkg;

at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
at async Promise.all (index 1)
at async respond$1 (file:///Users/mcqdevin/Documents/GitHub/bare-svelte/.svelte-kit/output/server/index.js:1773:13)
at async resolve (file:///Users/mcqdevin/Documents/GitHub/bare-svelte/.svelte-kit/output/server/index.js:2154:105)
at async respond (file:///Users/mcqdevin/Documents/GitHub/bare-svelte/.svelte-kit/output/server/index.js:2110:22)
at async visit (file:///Users/mcqdevin/Documents/GitHub/bare-svelte/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.350_svelte@3.48.0/node_modules/@sveltejs/kit/dist/chunks/index.js:1126:20)

`

[bostondevin]

Aha - I fixed it by setting kit.vite.ssr.noExternal to ["@fortawesome/*"] in the svelte.config.cjs

[josdejong]

I've tried to reproduce this issue in a fresh new sveltekit+ts application. When starting the development server, all works. But when creating a build (npm run build), it fails with the error you report.

Since this is a general issue, more people will hit this issue. it would be neath to try create a workaround for it, like your link describes replacing import {...} from '@fortawesome/free-solid-svg-icons' with import {...} from '@fortawesome/free-solid-svg-icons/index.es', we can try that out (though we will need something to guard regressions).

[josdejong]

I just verified, and adding /index.es on all the imports solves the issue. Still need to work this out neatly.

[josdejong]

Fixed now in v0.4.0

[josdejong]

I've just updated everything to the latest SvelteKit and Vite, and now fortawesome is giving issues again event with the /index.es workaround, then it errors:

(node:16204) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
SyntaxError: Unexpected token 'export'

I've reverted this workaround to import the "regular" way again. Then the original issue pops up again:

SyntaxError: Named export 'faAngleDown' not found. The requested module '@fortawesome/free-solid-svg-icons' is a CommonJS module, which may not support all module.exports as named exports.

At least, this original issue can be solved by configuring vite with ssr.noExternal = ["@fortawesome/*"]:

// file: vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],

  ssr: {
    noExternal: [
      "@fortawesome/*"
    ]
  }
};

export default config;

If anyone knows an other workaround for this I would love to know.

This will probably be fixed via the following FortAwesome PR: FortAwesome/Font-Awesome#19041

[josdejong]

This is fixed now with the latest version of @fortawesome, v6.2.0. I upgraded to this version in svelte-jsoneditor@0.7.0