When Webpack sees this dynamic import with template literals, it tries to bundle ALL matching .js files in the @fortawesome/ directories. This includes import.macro.js which is a Babel macro file that requires an internal FontAwesome development tool (@fortawesome-internal-tools/fontawesome-icons/canonical) that isn't published to npm.

The /* webpackExclude: /import\.macro/ */ magic comment tells Webpack to exclude any files matching the regex pattern import.macro when building the dynamic import context. This prevents Webpack from trying to bundle import.macro.js and its problematic internal dependency.

Author: JeanMarcMilletScality

src/lib/components/icon/Icon.component.tsx

@@ -272,7 +272,10 @@ function NonWrappedIcon({
     }
 
     // Handle FontAwesome icons with dynamic import
-    import(`@fortawesome/${fontAwesomeType}/${iconClass}.js`).then((module) => {
+    import(
+      /* webpackExclude: /import\.macro/ */
+      `@fortawesome/${fontAwesomeType}/${iconClass}.js`
+    ).then((module) => {
       setIcon(module[iconClass]);
       iconCache[cacheKey] = module[iconClass];
     });