Estoy trabajando con framer-motion en mi proyecto NextJS. Estoy tratando de importar {motion} usando la importación dynamic de Next. Pero desafortunadamente, no parece funcionar.

 import { motion } from "framer-motion"

Estoy tratando de convertir la importación anterior como una importación dinámica como se indica a continuación:

 const motion = dynamic(() => import("framer-motion").then((module) => module.motion) )

Pero arroja un error:

 "Argument of type '() => Promise<ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; } | ((<Props>(Component: string | ComponentType<Props>, customMotionComponentConfig?: CustomMotionComponentConfig | undefined) => CustomDomComponent<...>) & HTMLMotionComponents & SVGMotionComponents)>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'."

Cada vez que importo otras cosas como íconos, componentes personalizados, funciona como se esperaba, por ejemplo, la importación dinámica que se muestra a continuación funciona bien:

 const DoubleArrowRightIcon = dynamic(() => import("@radix-ui/DoubleArrowRightIcon"), { loading: () => <p>..</p>, })

Miré otras respuestas y encontré este enlace , pero aún así, no puedo hacer que funcione.

¿Alguna ayuda por favor?