[bug]: Animated div typescript error regarding children prop

[jeeheezy]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.7.5

What's Wrong?

Animated tags don't seem to support children prop for TypeScript. This seems similar to issue #2332, but I'm not using Next 15/React 19, I am currently using Next 14.2.24 and React 18.3.1.

The animated.div only has an SVG (made React component by SVGR) as a child. While I was able to get around the issue by using the animated function instead and passing a component in there (i.e. see second image, there are no typescript errors present there), I'm sure there would be situations where having animated.div take children would be preferable compared to defining a component separately.

To Reproduce

Use an animated tag with children elements

Expected Behaviour

No Typescript issue

Link to repo

No public repo currently

[1940879828]

2025/2/25。I encountered the same bug
"next": "15.1.5",
"react": "^18.3.1",
"@react-spring/web": "^9.7.5",

<a.div style={springs}>
        <div>test</div>
 </a.div>

error

Property 'children' does not exist on type 'IntrinsicAttributes & AnimatedProps<{ style?: { accentColor?: AccentColor | undefined; alignContent?: AlignContent | undefined; alignItems?: AlignItems | undefined; ... 841 more ...; matrix3d?: readonly [...] | undefined; } | undefined; }> & { ...; }'.

[1940879828]

I have a temporary solution.
Patch the type file.

diff --git a/node_modules/@react-spring/web/dist/react-spring_web.modern.d.ts b/node_modules/@react-spring/web/dist/react-spring_web.modern.d.ts
index f647f1b..a18ef5c 100644
--- a/node_modules/@react-spring/web/dist/react-spring_web.modern.d.ts
+++ b/node_modules/@react-spring/web/dist/react-spring_web.modern.d.ts
@@ -24,7 +24,9 @@ type AnimatedComponent<T extends ElementType> = ForwardRefExoticComponent<Animat
 }>>;
 /** The props of an `animated()` component */
 type AnimatedProps<Props extends object> = {
-    [P in keyof Props]: P extends 'ref' | 'key' ? Props[P] : AnimatedProp<Props[P]>;
+    [P in keyof Props]: P extends 'ref' | 'key' | 'children' ? Props[P] : AnimatedProp<Props[P]>;
+} & {
+    children?: React.ReactNode;
 };
 type StyleProps = Merge<CSSProperties, TransformProps>;
 type StylePropKeys = keyof StyleProps;

This eliminates type errors, but I don't know if it will cause other type problems, so use caution

[Deftunk]

Having the same issue here.
But I would not recommend your solution @1940879828. I cant agree with the modification of a node_module. Everytime you will npm or yarn the issue will be back.
I would more recommend to temporary override the type of animated with custom type by adding to a file custom.d.ts some code like bellow.

import reactSpring from "@react-spring/web";
declare module "@react-spring/web" {
  const animated = {
    children: React.ReactNode,
    ...reactSpring.animated,
  };
}

[flangham]

Having same issue

[ta93imtk]

I haven't checked in previous version, but the workaround below has worked in the latest.

• [bug]: Typescript issue in Next.js 15 #2332 (comment)

react 19.0.0 / @react-spring/web 9.7.5

export default function App() {
  const [open, toggle] = useState(false)
  const [ref, { width }] = useMeasure()
  const props = useSpring({ width: open ? width : 0 })

  // ↓workaround
  const AnimatedDivFill = animated("div")
  const AnimatedDivContent = animated("div")
  // ↑

  return (
    <div className={styles.container}>
      <div ref={ref} className={styles.main} onClick={() => toggle(!open)}>
        <AnimatedDivFill className={styles.fill} style={props} />
        <AnimatedDivContent className={styles.content}>{props.width.to(x => x.toFixed(0))}</AnimatedDivContent>
      </div>
    </div>
  )
}

[Deftunk]

• [bug]: Typescript issue in Next.js 15 [bug]: Typescript issue in Next.js 15 #2332 (comment)

this is issue is only a type issue. Dont modify your code patterns for it. Just override the type like I did in my post above.
@joshuaellis Any resolution scheduled ?