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?
dynamic(callback)
looks like callback
provided in dynamic
should return react components
try
const DynamicComponent = dynamic(() => import('./Icons/IconComponents').tick);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.