Running into this strange error using @react-spring/web

import { PropsWithChildren, ReactNode } from 'react'
import { useSpring, animated } from '@react-spring/web'
import useMeasure from 'react-use-measure'

export interface ExpandableCardProps {
    open: boolean
    content: ReactNode
}

export function ExpandableCard({ open, content, children, ...rest }: PropsWithChildren<ExpandableCardProps>) {
    const [ref, { height }] = useMeasure()

    const slideAnimation = useSpring({
        height: open ? height : 0,
        config: {
            tension: 500,
            friction: 50,
        },
    })

    return (
        <div className="shadow-md flex flex-col rounded-size-6 bg-[var(--bg-secondary)] overflow-hidden" {...rest}>
            <div className="rounded-size-6 bg-[var(--bg-primary)] shadow-xs">{children}</div>

Type '{ children: Element; style: { overflow: "hidden"; height: SpringValue<number>; }; }' is not assignable to type 'IntrinsicAttributes & AnimatedProps<{ style?: { accentColor?: AccentColor | undefined; alignContent?: AlignContent | undefined; alignItems?: AlignItems | undefined; ... 841 more ...; matrix3d?: readonly [...] | undefined; } | undefined; }> & { ...; }'.
  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; }> & { ...; }'

            <animated.div style={{ ...slideAnimation, overflow: 'hidden' }}>
                <div ref={ref} className="rounded-b-size-6">
                    {content}
                </div>
            </animated.div>
        </div>
    )
}

Everytime I try to import animated or a I get the same issue

Running into this strange error using @react-spring/web

import { PropsWithChildren, ReactNode } from 'react'
import { useSpring, animated } from '@react-spring/web'
import useMeasure from 'react-use-measure'

export interface ExpandableCardProps {
    open: boolean
    content: ReactNode
}

export function ExpandableCard({ open, content, children, ...rest }: PropsWithChildren<ExpandableCardProps>) {
    const [ref, { height }] = useMeasure()

    const slideAnimation = useSpring({
        height: open ? height : 0,
        config: {
            tension: 500,
            friction: 50,
        },
    })

    return (
        <div className="shadow-md flex flex-col rounded-size-6 bg-[var(--bg-secondary)] overflow-hidden" {...rest}>
            <div className="rounded-size-6 bg-[var(--bg-primary)] shadow-xs">{children}</div>

Type '{ children: Element; style: { overflow: "hidden"; height: SpringValue<number>; }; }' is not assignable to type 'IntrinsicAttributes & AnimatedProps<{ style?: { accentColor?: AccentColor | undefined; alignContent?: AlignContent | undefined; alignItems?: AlignItems | undefined; ... 841 more ...; matrix3d?: readonly [...] | undefined; } | undefined; }> & { ...; }'.
  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; }> & { ...; }'

            <animated.div style={{ ...slideAnimation, overflow: 'hidden' }}>
                <div ref={ref} className="rounded-b-size-6">
                    {content}
                </div>
            </animated.div>
        </div>
    )
}

Everytime I try to import animated or a I get the same issue

• javascript
• typescript
• react-spring

Share Improve this question Follow asked Mar 25 at 12:57 Jason McFarlaneJason McFarlane 2,19555 gold badges2020 silver badges3939 bronze badges 3

• The error is telling you that you can't have children of your animated.div. Whether or not that's actually true is a question for their API docs. – Jared Smith Commented Mar 25 at 13:36
• Although it certainly looks like it should work. – Jared Smith Commented Mar 25 at 13:43
• I've been able to reproduce the problem. (It would have been helpful for your minimal reproducible example to not have the error message dropped in the middle of it though!) – Quentin Commented Mar 25 at 14:02

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

This is a reported bug in @react-spring/web that is still open at the time of writing.

Deftunk recommends creating a custom.d.ts file and overriding the type:

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