如何在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
));

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

How to load icons dynamically in Next.js?

reactjs

code-splitting

next.js