How do I import framer-motion using dynamic import in NextJS?

Question

I working with framer-motion in my NextJS project. I'm trying to import {motion} using Next's dynamic import. But unfortunately, it doesn't seem to work.

import { motion } from "framer-motion"

I'm trying to convert the above import as a dynamic import as given below:

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

But it throws an 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<{}>'."

Whenever I import other things like icons, custom components it works as expected, for example the dynamic import given below works fine :

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

I have looked at other answers and found this link but still, not able to make it work.

Any help please?

Answer 1

const MotionDiv = dynamic(() =>
  import("framer-motion").then((mod) => mod.motion.div)
);
<MotionDiv
                    animate={{
                      rotate: activeIndex === index ? 180 : 0,
                    }}
                    className='flex h-6 w-6 items-center justify-center'
                  >
</MotionDiv>