使用动态导入在 NextJs 中定义类型时遇到问题 - Typescript / NextJs

Question

I've built a component that use next/dynamic to import react-icons when necessary, but I cannot find a correct way of defining typescript type for this component. The component in itself works.

Here is a link to codesandbox with typescript: https://codesandbox.io/s/nextjs-dynamic-import-with-react-icons-zk1kz9

The code:

import dynamic from "next/dynamic";

const DynamicIcon = ({
  iconFamily,
  icon,
  ...rest
}: {
  iconFamily: keyof typeof Icons;
  icon: string;
}) => {
  const Icons = {
    ci: dynamic(() => import("react-icons/ci").then((mod) => mod[icon])),
    fa: dynamic(() => import("react-icons/fa").then((mod) => mod[icon])),
    io: dynamic(() => import("react-icons/io").then((mod) => mod[icon])),
    io5: dynamic(() => import("react-icons/io5").then((mod) => mod[icon])),
    md: dynamic(() => import("react-icons/md").then((mod) => mod[icon])),
    ti: dynamic(() => import("react-icons/ti").then((mod) => mod[icon])),
    go: dynamic(() => import("react-icons/go").then((mod) => mod[icon])),
    fi: dynamic(() => import("react-icons/fi").then((mod) => mod[icon])),
    gi: dynamic(() => import("react-icons/gi").then((mod) => mod[icon])),
    wi: dynamic(() => import("react-icons/wi").then((mod) => mod[icon])),
    di: dynamic(() => import("react-icons/di").then((mod) => mod[icon])),
    ai: dynamic(() => import("react-icons/ai").then((mod) => mod[icon])),
    bs: dynamic(() => import("react-icons/bs").then((mod) => mod[icon])),
    ri: dynamic(() => import("react-icons/ri").then((mod) => mod[icon])),
    fc: dynamic(() => import("react-icons/fc").then((mod) => mod[icon])),
    gr: dynamic(() => import("react-icons/gr").then((mod) => mod[icon])),
    hi: dynamic(() => import("react-icons/hi").then((mod) => mod[icon])),
    hi2: dynamic(() => import("react-icons/hi2").then((mod) => mod[icon])),
    si: dynamic(() => import("react-icons/si").then((mod) => mod[icon])),
    sl: dynamic(() => import("react-icons/sl").then((mod) => mod[icon])),
    im: dynamic(() => import("react-icons/im").then((mod) => mod[icon])),
    bi: dynamic(() => import("react-icons/bi").then((mod) => mod[icon])),
    cg: dynamic(() => import("react-icons/cg").then((mod) => mod[icon])),
    vsc: dynamic(() => import("react-icons/vsc").then((mod) => mod[icon])),
    tb: dynamic(() => import("react-icons/tb").then((mod) => mod[icon])),
    tfi: dynamic(() => import("react-icons/tfi").then((mod) => mod[icon]))
  };

  const Icon = iconFamily && icon ? Icons[iconFamily] : null;

  if (!Icon) return <></>;

  return (
    <>
      <Icon {...rest} />
    </>
  );
};

export default DynamicIcon;

The error:

./components/DynamicIcon.tsx:12:17
Type error: Argument of type '() => Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to parameter of type 'DynamicOptions<IconBaseProps> | Loader<IconBaseProps>'.
  Type '() => Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to type '() => LoaderComponent<IconBaseProps>'.
    Type 'Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to type 'LoaderComponent<IconBaseProps>'.
      Type 'typeof import("/sandbox/node_modules/react-icons/ci/index") |IconType | undefined' is not assignable to type 'ComponentType<IconBaseProps> | { default: ComponentType<IconBaseProps>; }'.
        Type 'undefined' is not assignable to type 'ComponentType<IconBaseProps> | { default: ComponentType<IconBaseProps>; }'.

I tried multiple way of defining type (string, keyof typeof IconType etc)

Answer 1

I think the issue is you are returning Promise here.

ci: dynamic(async () => {
    const mod=await import("react-icons/ci")
    return mod[icon]    
)
})

Also you are passing icon as string but this string value should be a value that react-library exports. Maybe you should define an Enum for icon type