Cannot update a component (HotReload) while rendering a different component (CSSMotion). To locate the bad setState() call inside CSSMotion, follow the stack trace as described in https://react.dev/link/setstate-in-render

[EhsanBeheshtAein]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch rc-motion@2.9.3 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/rc-motion/es/CSSMotion.js b/node_modules/rc-motion/es/CSSMotion.js
index c75a051..364992e 100644
--- a/node_modules/rc-motion/es/CSSMotion.js
+++ b/node_modules/rc-motion/es/CSSMotion.js
@@ -56,6 +56,7 @@ export function genCSSMotion(config) {
         return null;
       }
     }
+
     var _useStatus = useStatus(supportMotion, visible, getDomElement, props),
       _useStatus2 = _slicedToArray(_useStatus, 4),
       status = _useStatus2[0],
@@ -120,14 +121,21 @@ export function genCSSMotion(config) {
 
     // Auto inject ref if child node not have `ref` props
     if ( /*#__PURE__*/React.isValidElement(motionChildren) && supportRef(motionChildren)) {
-      var _ref = motionChildren,
-        originNodeRef = _ref.ref;
-      if (!originNodeRef) {
-        motionChildren = /*#__PURE__*/React.cloneElement(motionChildren, {
-          ref: setNodeRef
-        });
-      }
+      const originNodeRef = motionChildren.ref;
+
+      motionChildren = React.cloneElement(motionChildren, {
+        ref: (node) => {
+          // Assign the ref in a callback function to avoid modifying state during render
+          setNodeRef(node);
+          if (typeof originNodeRef === 'function') {
+            originNodeRef(node);
+          } else if (originNodeRef) {
+            originNodeRef.current = node;
+          }
+        },
+      });
     }
+
     return /*#__PURE__*/React.createElement(DomWrapper, {
       ref: wrapperNodeRef
     }, motionChildren);

This issue body was partially generated by patch-package.

[infodusha]

While I have the same issue, unfortunately the patch didn't help

[Damon4]

worked for me, nextjs^15, react^19

diff --git a/node_modules/rc-motion/es/CSSMotion.js b/node_modules/rc-motion/es/CSSMotion.js
index c75a051..9448988 100644
--- a/node_modules/rc-motion/es/CSSMotion.js
+++ b/node_modules/rc-motion/es/CSSMotion.js
@@ -121,7 +121,7 @@ export function genCSSMotion(config) {
     // Auto inject ref if child node not have `ref` props
     if ( /*#__PURE__*/React.isValidElement(motionChildren) && supportRef(motionChildren)) {
       var _ref = motionChildren,
-        originNodeRef = _ref.ref;
+          originNodeRef = _ref.props.ref || _ref.ref;
       if (!originNodeRef) {
         motionChildren = /*#__PURE__*/React.cloneElement(motionChildren, {
           ref: setNodeRef
diff --git a/node_modules/rc-motion/lib/CSSMotion.js b/node_modules/rc-motion/lib/CSSMotion.js
index 48765dd..74e4b85 100644
--- a/node_modules/rc-motion/lib/CSSMotion.js
+++ b/node_modules/rc-motion/lib/CSSMotion.js
@@ -133,7 +133,7 @@ function genCSSMotion(config) {
     // Auto inject ref if child node not have `ref` props
     if ( /*#__PURE__*/React.isValidElement(motionChildren) && (0, _ref2.supportRef)(motionChildren)) {
       var _ref = motionChildren,
-        originNodeRef = _ref.ref;
+          originNodeRef = _ref.props.ref || _ref.ref;
       if (!originNodeRef) {
         motionChildren = /*#__PURE__*/React.cloneElement(motionChildren, {
           ref: setNodeRef

[afc163]

@zombieJ

[afc163]