如何在Next.js中动态加载图标？

Question

在我的Next.js / React文件中有以下几行：

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

基于文档：https://nextjs.org/docs/advanced-features/dynamic-import

我将其替换为：

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

我保留了这些台词：

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

但是编译器yarn build引发了引用一些Promise问题的错误

你知道可能是哪里出了问题吗？

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.

Answer 1

使用

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

您是在暗示，@fortawesome/react-fontawesome的默认导出是一个可以做成dynamic的组件，但是使用

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

您正在导入命名导出FontAwesomeIcon。

该导入dynamic等效项为

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

或者换句话说

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

或

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