react-spring: "Type instantiation is excessively deep and possibly infinite" Typescript error when used with styled-components css prop

🐛 Bug Report

Using react-spring in conjunction with styled-components css prop in Typescript causes a “Type instantiation is excessively deep and possibly infinite” compilation error.

There are several ways to enable typescript support for the css prop from styled-components in typescript listed here: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245 all of which cause this error.

To Reproduce

Steps to reproduce the behavior:

Create a typescript react app with npx create-react-app react-spring-css-prop-error --template typescript
Add react-spring, styled-components and types: yarn add react-spring styled-components @types/styled-components
Add reference to css prop types in App.tsx: /// <reference types="styled-components/cssprop" />
Attempt to use animated compenent (e.g. animated.div) in App component

Expected behavior

<animated.div></animated.div> should have no compilation errors

Link to repro

CodeSandbox repro

Environment

react-spring v9.1.2
react v17.0.2
styled-components v5.3.0
'@types/styled-components` v5.1.9

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 11
Comments: 22 (7 by maintainers)

Most upvoted comments

For anybody else running into this issue with react-three-fiber (@looeee), I was having this issue because I hadn’t installed the types for threejs. Installing @types/three fixed everything. Here’s the relevant parts of my npm ls:

@react-spring/three@9.4.4
@react-three/fiber@8.0.12
@types/react-dom@18.0.3
@types/react@18.0.8
@types/three@0.139.0
react-dom@18.1.0
react@18.1.0
three@0.140.0
typescript@4.6.4

christopherjbaker on May 1, 2022

@brancusi The work around I found currently was to just wrap the animated.div and reference that variable:

const AnimatedDiv = styled(animated.div)``;

    "@types/styled-components": "5.1.14",
    "react-spring": "9.2.4",
    "typescript": "4.4.2",

mandyMooreFan on Sep 4, 2021

The following works for me.

const AnimDiv = styled(animated.div)<any>``

lionpunk on Oct 21, 2021

After looking into #1784, we should also track this issue – https://github.com/microsoft/TypeScript/issues/34933

joshuaellis on Dec 12, 2021

Leaving this here as its relevant to tracking the issue – https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245

joshuaellis on Oct 21, 2021