Bundling FontAwesome with requireJS causes a Maximum call stack size exceeded error

[arnederuwe]

Bundling FontAwesome with requireJS causes a Maximum call stack size exceeded error

[3cp]

We have solved the issue in private chat.

For record, this looks like a rare issue in MS Edge browser when executing babel transpiled commonjs code (from ESM).
The fa pro packages have tons of exports in the index.es.js, which cli-bundler (and also dumber) uses babel to transpile to commonjs. The transpiled code has some huge assignment chain like this:

...
exports.faAlien=exports.faAlicorn=exports.faAlbumCollection=exports.faAlbum=exports.faAlarmSnooze=exports.faAlarmPlus=exports.faAlarmExclamation=exports.faAlarmClock=exports.faAirFreshener=exports.faAirConditioner=exports.faAdjust=exports.faAddressCard=exports.faAddressBook=exports.faAd=exports.faAcorn=exports.faAbacus=void 0;

MS Edge seems having problem to execute such JavaScript.

The work around is to use explicit "main" file override in cli-bundler aurelia.json config to bypass the index.es.js. Those fa pro packages' UMD build index.js has no such huge assignment chain issue (guess fa uses something like Rollup to build the UMD file).

"dependencies: [
  ...
    {
      "name": "@fortawesome/pro-solid-svg-icons",
      "main": "index.js"
    }
]

[3cp]

My old license of fa5 is expired. Is it possible for you to zip all node_modules folder?

One possible cause might be there is some circular dependency in some fa pro js code, requirejs cannot handle that properly at runtime.

The replacement of cli-bundler, called dumber (we use dumber in Aurelia 2 skeleton now), can handle circular dependency in CommonJS and ESM. You might try that, there is an Aurelia 1 skeleton provided by dumber.

[arnederuwe]

I'm not sure the issue is due to requireJS, as we are using this combo in other projects as well without issues. When Downgrading FontAwesome, the issue persists, so I'm quite certain this must be some build issue resulting in a faulty bundle.

Anyway, I managed to reproduce the issue using dumber, with FontAwesome Free, getting the same stack size exception:
my-app.zip

[3cp]

This is very strange, I am running your dumber app without any problem (only needed to remove pro packages from package.json). Node v14.17.0 on macOS. No error in terminal and browser console.

Saw a warning from Babel, but it's unlikely to be related.

[dumber] 1.2.36     @fortawesome/fontawesome-svg-core
[dumber] 5.15.4     @fortawesome/free-solid-svg-icons
[BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.

You problem might only exists in pro packages. If you were running watch mode, and modified your code to import free packages only, the bundle file in browser side still contains previously traced pro packages. Watch mode doesn't remove package from bundle, only adds new ones.

[arnederuwe]

You problem might only exists in pro packages. If you were running watch mode, and modified your code to import free packages only, the bundle file in browser side still contains previously traced pro packages. Watch mode doesn't remove package from bundle, only adds new ones.

It seems you are correct, after a full rebuild I can't reproduce the issue with the free icon set :(
I'll contact you on discord to send my full project, as I'm not sure how permissive the FA license is for sharing stuff like this..

[3cp]

Update: not Edge issue.
It only affects Edge on macOS, but all browsers (Chrome/Edge/Firefox) on Win10 or Win11.