Fix: add "use client" directive to feature animation files

dev/next/app/client-boundary.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { motion } from "motion/react"
+import { RenderChildren } from "./render-children"
+
+export const MotionRenderChildren = motion.create(RenderChildren)
+
+export const MotionWithRenderChildren = (props) => {
+    return (
+        <MotionRenderChildren {...props}>
+            {({ label }) => <div id="motion-render-children">{label}</div>}
+        </MotionRenderChildren>
+    )
+}
+
+const Custom = (props: React.HTMLProps<HTMLDivElement>) => {
+    return <div id="motion-custom" {...props} />
+}
+
+export const MotionCustom = motion.create(Custom)
+
+export const MotionDiv = motion.div

dev/next/app/motion-m.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { domAnimation, LazyMotion } from "motion/react"
 import * as m from "motion/react-m"
 

dev/next/app/page.tsx

@@ -1,7 +1,11 @@
 import { AnimatePresence, MotionConfig } from "motion/react"
 import * as motion from "motion/react-client"
 import { MotionM } from "./motion-m"
-import { MotionWithRenderChildren } from "./motion"
+import {
+    MotionCustom,
+    MotionWithRenderChildren,
+    MotionDiv,
+} from "./client-boundary"
 
 export default function Page() {
     return (
@@ -16,7 +20,26 @@ export default function Page() {
                 >
                     Hello World
                 </motion.div>
-                <MotionWithRenderChildren key="motion-render-children" />
+                <MotionWithRenderChildren
+                    key="motion-render-children"
+                    transition={{ type: "spring" }}
+                    animate={{ x: 50 }}
+                />
+                <MotionDiv
+                    key="motion-div"
+                    id="motion-div"
+                    transition={{ type: "spring" }}
+                    animate={{ x: 50 }}
+                >
+                    Hello World
+                </MotionDiv>
+                <MotionCustom
+                    key="motion-custom"
+                    transition={{ type: "spring" }}
+                    animate={{ x: 50 }}
+                >
+                    Hello World
+                </MotionCustom>
             </AnimatePresence>
         </MotionConfig>
     )

dev/next/app/render-children.tsx

@@ -3,8 +3,8 @@
 import { forwardRef, ReactNode } from "react"
 
 export const RenderChildren = forwardRef(function Component(
-    { children }: { children: (p: { test: boolean }) => ReactNode },
+    { children }: { children: (p: { label: string }) => ReactNode },
     ref: React.Ref<HTMLDivElement>
 ) {
-    return <div ref={ref}>{children({ test: true })}</div>
+    return <div ref={ref}>{children({ label: "Hello World" })}</div>
 })

packages/framer-motion/cypress/integration-rsc/use-client.ts

@@ -8,5 +8,9 @@ describe("use client", () => {
             .should("exist")
             .get("#motion-render-children")
             .should("exist")
+            .get("#motion-div")
+            .should("exist")
+            .get("#motion-custom")
+            .should("exist")
     })
 })

packages/framer-motion/src/render/dom/features-animation.ts

@@ -1,3 +1,5 @@
+"use client"
+
 import { animations } from "../../motion/features/animations"
 import { gestureAnimations } from "../../motion/features/gestures"
 import { FeatureBundle } from "../../motion/features/types"

packages/framer-motion/src/render/dom/features-max.ts

@@ -1,3 +1,5 @@
+"use client"
+
 import { drag } from "../../motion/features/drag"
 import { layout } from "../../motion/features/layout"
 import { FeatureBundle } from "../../motion/features/types"

packages/framer-motion/src/render/dom/features-min.ts

@@ -1,3 +1,5 @@
+"use client"
+
 import { animations } from "../../motion/features/animations"
 import { FeatureBundle } from "../../motion/features/types"
 import { createDomVisualElement } from "./create-visual-element"