Next.js Discord

Discord Forum

framer motion with nextjs v14

Answered
<Milind ツ /> posted this in #help-forum
Open in Discord
<Milind ツ />OP
Hi,

How can i create a custom motion component such that i do not need to add "use client;" on every page.

I have made a custom AppMotion variable like this:
"use client";

import { motion } from "framer-motion";

export const AppMotion = motion;

but using this AppMotion results in 
Error: Could not find the module "portfolio\src\lib\components\motion\AppMotion.tsx#AppMotion#h1" in the React Client Manifest. This is probably a bug in the React Server Components bundler.


How could we fix this?
Answered by Ray
"use client";

import { motion } from "framer-motion";

export const AppMotionDiv = motion.div;
export const MotionSpan = motion.span;
export const MotionP = motion.p
View full answer

12 Replies

<Milind ツ />OP
But I don't want to do it that way. Unnecessary div everywhere
Can't i do just appmotion and use any html tag as appmotion.h1 and so on
Ray
"use client";

import { motion } from "framer-motion";

export const AppMotionDiv = motion.div;
export const MotionSpan = motion.span;
export const MotionP = motion.p
Answer
Ray
I think you need to re-export every element
<Milind ツ />OP
Damn
Ray
until framer-motion do something to fix this lol
<Milind ツ />OP
Is there any reason as to why it's like this?
<Milind ツ />OP
one more thing, the next link component cannot use motion?

when i do motion.Link, it throws:

Property 'Link' does not exist on type '(<Props extends {}>(Component: string | ComponentType<PropsWithChildren<Props>>, customMotionComponentConfig?: CustomMotionComponentConfig | undefined) => CustomDomComponent<...>) & HTMLMotionComponents & SVGMotionComponents'. Did you mean 'link'?
Ray
have you try
const MotionLink= motion(NextLink)?
<Milind ツ />OP
yep that worked