How to load icons dynamically in Next.js?

Question

I have these lines in my Next.js / React files:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

Based on the docs: https://nextjs.org/docs/advanced-features/dynamic-import

I replaced with this:

import dynamic from "next/dynamic";
const FontAwesomeIcon = dynamic(() => import("@fortawesome/react-fontawesome"));

And I kept these lines:

<FontAwesomeIcon icon={icon} className={styles.icon} />

but compiler yarn build raise error refering some Promise issue

Do you know maybe what is wrong?

Type error: Argument of type '() => Promise<{ default: typeof import("/Users/kukodajanos/Workspace/Tiket/Portal2/node_modules/@fortawesome/react-fontawesome/index"); FontAwesomeIcon(props: FontAwesomeIconProps): JSX.Element; }>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
  Type '() => Promise<{ default: typeof import("/Users/kukodajanos/Workspace/Tiket/Portal2/node_modules/@fortawesome/react-fontawesome/index"); FontAwesomeIcon(props: FontAwesomeIconProps): JSX.Element; }>' is not assignable to type '() => LoaderComponent<{}>'.
    Type 'Promise<{ default: typeof import("/Users/kukodajanos/Workspace/Tiket/Portal2/node_modules/@fortawesome/react-fontawesome/index"); FontAwesomeIcon(props: FontAwesomeIconProps): Element; }>' is not assignable to type 'LoaderComponent<{}>'.
      Type '{ default: typeof import("/Users/kukodajanos/Workspace/Tiket/Portal2/node_modules/@fortawesome/react-fontawesome/index"); FontAwesomeIcon(props: FontAwesomeIconProps): Element; }' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
        Type '{ default: typeof import("/Users/kukodajanos/Workspace/Tiket/Portal2/node_modules/@fortawesome/react-fontawesome/index"); FontAwesomeIcon(props: FontAwesomeIconProps): Element; }' is not assignable to type '{ default: ComponentType<{}>; }'.
          Types of property 'default' are incompatible.
            Type 'typeof import("/Users/kukodajanos/Workspace/Tiket/Portal2/node_modules/@fortawesome/react-fontawesome/index")' is not assignable to type 'ComponentType<{}>'.
              Type 'typeof import("/Users/kukodajanos/Workspace/Tiket/Portal2/node_modules/@fortawesome/react-fontawesome/index")' is not assignable to type 'FunctionComponent<{}>'.
                Type 'typeof import("/Users/kukodajanos/Workspace/Tiket/Portal2/node_modules/@fortawesome/react-fontawesome/index")' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any>'.

  4 | import { IconProp } from "@fortawesome/fontawesome-svg-core";
  5 | import dynamic from "next/dynamic";
> 6 | const FontAwesomeIcon = dynamic(() => import("@fortawesome/react-fontawesome"));
    |                                 ^
  7 | 
  8 | export default function ServiceContainer(props: {
  9 |   title: string;
error Command failed with exit code 1.

AKX · Accepted Answer · 2021-10-10 18:32:09Z

2

With

const FontAwesomeIcon = dynamic(() => import("@fortawesome/react-fontawesome"));

you are insinuating the default export of @fortawesome/react-fontawesome is a component that could be made dynamic, but with

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

you are importing the named export FontAwesomeIcon.

The dynamic equivalent of that import would be

const FontAwesomeIcon = dynamic(async () => {
  const mod = await import("@fortawesome/react-fontawesome"));
  return mod.FontAwesomeIcon;
});

or in other words

const FontAwesomeIcon = dynamic(async () => {
  const {FontAwesomeIcon} = await import("@fortawesome/react-fontawesome"));
  return FontAwesomeIcon;
});

or

const FontAwesomeIcon = dynamic(async () => (
  (await import("@fortawesome/react-fontawesome")).FontAwesomeIcon
));

answered Oct 10, 2021 at 18:32

AKX

171k16 gold badges146 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

János Over a year ago

thanks :) I try to apply the same logic to an other set / type of icons, strnage it does not work. :D stackoverflow.com/questions/69518028/…

Collectives™ on Stack Overflow

How to load icons dynamically in Next.js?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related