I am currently utilizing framer-motion in my NextJS project. My goal is to import {motion} using Next's dynamic import method. However, I am encountering difficulties as it does not seem to function properly.
import { motion } from "framer-motion"
To tackle this issue, I attempted to transform the above import into a dynamic import as shown below:
const motion = dynamic(() =>
import("framer-motion").then((module) => module.motion)
)
Unfortunately, I receive an error message:
"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<{}>'."
Interestingly, when importing other elements such as icons or custom components, everything functions correctly. An example of a successful dynamic import is demonstrated below:
const DoubleArrowRightIcon = dynamic(() => import("@radix-ui/DoubleArrowRightIcon"), {
loading: () => <p>..</p>,
})
Despite exploring various resources and referencing discussions like this link, I still struggle to resolve the issue.
Any suggestions or assistance would be greatly appreciated.