next.js 从object动态导入组件

Question

I have an object of components that I'll looking to dynamically import using next/dynmaic

I'm just wondering is it possible.

This is the object in question

// IconComponents.tsx

import {
    Tick,
    Star
} from 'components/Icons';

export interface Map {
  [name: string]: JSX.Element;
}

const IconObject: Map = {
  tick: <Tick />,
  star: <Star />,
};

export default IconObject;

If I import this in a different file

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('./Icons/IconComponents'));

I get the following error

Argument of type '() => Promise<typeof import("...path")>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.

Type '() => Promise<typeof import("...path")>' is not assignable to type '() => LoaderComponent<{}>'.

Am I doing sometihng wrong, I need all the component in the object so should I be looping through it? Any ideas?

Answer 1

dynamic(callback)

looks like callback provided in dynamic should return react components

try

const DynamicComponent = dynamic(() => import('./Icons/IconComponents').tick);