Issue with FontAwesome 6 and dynamic import of single icons

[lmolinar]

Since we updated to version 6 we're not able to use dynamic imports of single icons like the following:

export const getRegularIcon = (iconName) =>
    import(
        /* webpackChunkName: "far" */
        /* webpackExclude: /index\.js|index\.es\.js$/ */
        `@fortawesome/pro-regular-svg-icons/${iconName}`
    )
        .then((icon) => icon.definition)
        .catch(() => {
            // ignore
            return null;
        });

This used to work with fontawesome 5, and also with fontawesome 6 + old version of webpack (< 5).
We traced back the issue to the following addition in the package.json:

  "exports": {
    ".": {
      "import": "./index.es.js",
      "require": "./index.js",
      "default": "./index.js"
    },
    "./index": {
      "import": "./index.es.js",
      "require": "./index.js",
      "default": "./index.js"
    },
    "./index.js": {
      "import": "./index.es.js",
      "require": "./index.js",
      "default": "./index.js"
    },
    "./*": "./*.js"
  },

When using this with webpack > 5 the dynamic imports stopped working. Manually removing the exports property from fontawesome packages (e.g. @fortawesome/free-brands-svg-icons) is fixing the issue.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community and sorry for the late reply.

Sorry, I do not have a solution for this

@robmadole any thoughts?

[AlonsoK28]

Any update about this ?

[Termtime]

I was just about to open an issue about this when I find it already has been opened, any info or update regarding this?

[robmadole]

We are following the spec for the new package.json using the exports attribute. We can't remove this as a lot of the newer tooling requires it. Sorry, but I don't think we can help out with this. You might post the error you are getting at the very least?

[Termtime]

I see, I will share a bit of code & the issue

With FA v5 the following works:

const DynamicIcon = ({ iconName, variant }: DynamicIconProps) => {
  const [icon, setIcon] = useState<IconDefinition | null>(null);

  useEffect(() => {
    const loadIcon = () => {
      // getIconFileName is an external function that converts 
      // an icon name (chevron-right) into the appropriate filename (faChevronRight)
      const fileName = getIconFileName(iconName);

      import(
        /* webpackChunkName: "far" */
        `@fortawesome/pro-regular-svg-icons/${fileName}.js`
      )
        .then((module) => {
          const { definition } = module;

          library.add(definition);
          setIcon(definition);
        })
        .catch((e) => {
          console.error(`Error loading icon: ${iconName}`, e);
        });
    };

    if (iconName) {
      const existingDefinition = findIconDefinition({
        iconName: iconName,
        prefix: 'far',
      });
      if (existingDefinition) {
        setIcon(existingDefinition);
      } else {
        loadIcon();
      }
    }
  }, [iconName, variant]);

  if (!icon) {
    return null;
  }

  return <FontAwesomeIcon icon={icon} />;
};

With FA v6 the above does not work, it throws the following error:
Module not found: Can't resolve '@fortawesome/pro-regular-svg-icons'

Removing the exports attribute from package.json makes it work again.

[fregante]

This is also tracked in webpack:

• Dynamic imports don't work when exports specified in package.json and aliases webpack/webpack#13865

I don’t think it can actually be fixed here (without removing exports, but that's too late)