How to load icons dynamically in Next.js?-CodePudding

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.

CodePudding user response：

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;
});

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