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

[matt-winfield]

🐛 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:

1. Create a typescript react app with npx create-react-app react-spring-css-prop-error --template typescript
2. Add react-spring, styled-components and types: yarn add react-spring styled-components @types/styled-components
3. Add reference to css prop types in App.tsx: /// <reference types="styled-components/cssprop" />
4. 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

[joshuaellis]

I can't find a link to what the css prop does with styled-components do you have a link?

[matt-winfield]

I can't find a link to what the css prop does with styled-components do you have a link?

https://styled-components.com/docs/api#css-prop

It allows directly applying styles to an element/component without having to create a wrapper component for it.

(The actual usage of the prop isn't shown in the reproduction steps as using it isn't required to cause the error, it's only importing the types for it that cause this issue)

[joshuaellis]

Hm. I'm not sure this is an issue with our library? It appears to be a known issue – https://github.com/microsoft/TypeScript/issues/34933

Unless you've done some research into the issue to be certain it is an issue with react-spring?

[matt-winfield]

Hm. I'm not sure this is an issue with our library? It appears to be a known issue – microsoft/TypeScript#34933

Unless you've done some research into the issue to be certain it is an issue with react-spring?

I looked at that issue before posting here, it's obviously related but given that this issue only happens with the two libraries combined (if you take away either one both work fine individually) I'm not sure if it's the fault of the TypeScript compiler. Seems these 2 libraries conflict for some reason.

Perhaps I should raise this in styled-components instead, they may be able to fix the issue more easliy then in this library.

[joshuaellis]

Yeah maybe, I don't think the issue is particularly easy to solve, but they might have a better idea, it doesn't happen when using regular styled-components so it must be some way the css prop works...

[brancusi]

Any work arounds on this one? Hitting the same issue.

[joshuaellis]

@brancusi see my comment above, it only happens with the css prop of styled-components and they've not replied to the issue posted there, you should try prod them 👍🏼

[joshburgess]

Also running into the same issue when attempting to use any of the animated components from react-spring in a project which has the implicit css prop enabled (via babel-plugin-styled-components). Unfortunately, it does not matter whether or not you are actually using the css prop on any of the animated components. Merely the existence of babel-plugin-styled-components causes this problem. :/

[mandyMooreFan]

@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",

[lionpunk]

+1

[lionpunk]

The following works for me.

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

[joshuaellis]

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

[unicornware]

for anyone who doesn't actually use the css prop, this worked for me:

packages/ui/typings/cssprop.d.ts:

/** @see https://github.com/pmndrs/react-spring/issues/1515 */

declare global {
  namespace JSX {
    interface IntrinsicAttributes {
      css?: never
    }
  }
}

export {}

packages/ui/package.json:

  "dependencies": {
    "@flex-development/exceptions": "7.0.1",
    "@flex-development/tutils": "4.4.0",
    "@hookform/resolvers": "2.8.3",
    "@inlet/react-pixi": "6.6.5",
    "@popperjs/core": "2.10.2",
    "@react-spring/types": "9.3.0",
    "@react-spring/web": "9.3.0",
    "@styled-system/theme-get": "5.1.2",
    "class-transformer": "0.4.0",
    "class-validator": "0.13.1",
    "csstype": "3.0.9",
    "date-fns": "2.25.0",
    "lodash.indexof": "4.0.5",
    "lodash.isequal": "4.5.0",
    "lodash.isplainobject": "4.0.6",
    "lodash.mergewith": "4.6.2",
    "lodash.omit": "4.5.0",
    "lodash.pick": "4.4.0",
    "param-case": "3.0.4",
    "pixi.js-legacy": "6.2.0",
    "polished": "4.1.3",
    "react-element-to-jsx-string": "14.3.4",
    "react-hanger": "2.4.4",
    "react-hook-form": "7.19.1",
    "react-popper": "2.2.5",
    "react-use": "17.3.1",
    "styled-system": "5.1.5",
    "use-gesture": "1.0.0",
    "use-measure": "0.3.0",
    "use-ssr": "1.0.24",
    "use-timer": "2.0.1"
  },
  "devDependencies": {
    "@babel/core": "7.16.0",
    "@jest/test-result": "27.3.1",
    "@packages/ui": "link:src",
    "@plainsightml/tests": "link:../../__tests__",
    "@storybook/addon-a11y": "6.4.0-beta.30",
    "@storybook/addon-actions": "6.4.0-beta.30",
    "@storybook/addon-console": "1.2.3",
    "@storybook/addon-essentials": "6.4.0-beta.30",
    "@storybook/addon-jest": "6.4.0-beta.30",
    "@storybook/addons": "6.4.0-beta.30",
    "@storybook/builder-webpack5": "6.4.0-beta.30",
    "@storybook/client-api": "6.4.0-beta.30",
    "@storybook/core-common": "6.4.0-beta.30",
    "@storybook/manager-webpack5": "6.4.0-beta.30",
    "@storybook/node-logger": "6.4.0-beta.30",
    "@storybook/react": "6.4.0-beta.30",
    "@storybook/react-docgen-typescript-plugin": "1.0.1",
    "@testing-library/dom": "8.11.0",
    "@testing-library/react": "13.0.0-alpha.5",
    "@testing-library/react-hooks": "8.0.0-alpha.1",
    "@testing-library/user-event": "14.0.0-beta.1",
    "@types/babel__core": "7.1.16",
    "@types/chai": "4.2.22",
    "@types/chai-dom": "0.0.11",
    "@types/debug": "4.1.7",
    "@types/dotenv-defaults": "2.0.1",
    "@types/dotenv-webpack": "7.0.3",
    "@types/express": "4.17.13",
    "@types/jsdom": "16.2.13",
    "@types/lodash.findkey": "4.6.6",
    "@types/lodash.indexof": "4.0.6",
    "@types/lodash.isequal": "4.5.5",
    "@types/lodash.isplainobject": "4.0.6",
    "@types/lodash.mergewith": "4.6.6",
    "@types/lodash.omit": "4.5.6",
    "@types/lodash.pick": "4.4.6",
    "@types/mocha": "9.0.0",
    "@types/node": "16.0.0",
    "@types/react": "17.0.37",
    "@types/react-dom": "17.0.11",
    "@types/react-test-renderer": "17.0.1",
    "@types/sinon": "10.0.6",
    "@types/sinon-chai": "3.2.5",
    "@types/styled-components": "5.1.15",
    "@types/styled-system": "5.1.13",
    "@types/styled-system__theme-get": "5.0.2",
    "@types/webpack": "5.28.0",
    "@types/yargs": "17.0.5",
    "@vates/toggle-scripts": "1.0.0",
    "@whitespace/storybook-addon-html": "5.0.0",
    "assert": "2.0.0",
    "babel-loader": "8.2.3",
    "canvas": "2.8.0",
    "chai": "4.3.4",
    "chai-dom": "1.10.0",
    "chromatic": "6.0.5",
    "dotenv-defaults": "3.0.0",
    "dotenv-webpack": "7.0.3",
    "global-jsdom": "8.3.0",
    "jsdom": "18.0.1",
    "lodash.findkey": "4.6.0",
    "mocha": "9.1.3",
    "nyc": "15.1.0",
    "path-browserify": "1.0.1",
    "process": "0.11.10",
    "react": "18.0.0-beta-a65ceef37-20211130",
    "react-dom": "18.0.0-beta-a65ceef37-20211130",
    "react-is": "18.0.0-beta-a65ceef37-20211130",
    "react-test-renderer": "18.0.0-beta-a65ceef37-20211130",
    "serve": "13.0.2",
    "sinon": "12.0.1",
    "sinon-chai": "3.7.0",
    "storybook-mobile": "1.0.0",
    "styled-components": "5.3.3",
    "trash": "7.2.0",
    "trash-cli": "4.0.0",
    "ts-dedent": "2.2.0",
    "ts-loader": "9.2.6",
    "ts-node": "10.4.0",
    "tsconfig": "7.0.0",
    "tty-browserify": "0.0.1",
    "typescript": "4.5.0-beta",
    "typescript-plugin-styled-components": "2.0.0",
    "util": "0.12.4",
    "webpack": "5.62.1",
    "yargs": "17.2.1"
  }

[joshuaellis]

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

[looeee]

I'm running into this issues with a react-three-fiber project. However, attempting to reproduce it on codesandbox doesn't seem to be working so I guess it is only an issue on larger projects.

To workaround I have added a @ts-ignore

{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
{/* @ts-ignore: https://github.com/pmndrs/react-spring/issues/1515 */}
<animated.primitive object={model.meshes[j].material} opacity={anim.opacity} attach="material" />```

Here's the sandbox which contains something close to the setup causing the error in my project:

<a.primitive object={mesh} castShadow rotation-y={rotation} scale-x={scale} scale-z={scale} onClick={() => set(!active)}>
    <a.primitive object={mesh.material} color={color} attach="material" />
</a.primitive>

The reason I'm using primitives is because in my actual project the mesh is loaded from a glTF file but otherwise this looks quite similar. However, in the sandbox there's no error while in my larger project the Type instantiation is excessively deep and possibly infinite error shows up and prevents compilation.

[christopherjbaker]

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/[email protected]
@react-three/[email protected]
@types/[email protected]
@types/[email protected]
@types/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

[geoff-harper]

I'm still seeing this with the following versions

├── @react-spring/[email protected] ├── @react-three/[email protected] ├── @types/[email protected] ├── @types/[email protected] ├── @types/[email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected]

@christopherjbaker could you show a snippet of the impl that was showing the problem and then resolved? I'm getting the issue specifically on animated.meshBasicMaterial but animated.mesh seems okay

[theo-born]

Try this:

styled.d.ts

declare module "react" {
    interface DOMAttributes<T> {
        css?: never;
    }
}

declare global {
    namespace JSX {
        interface IntrinsicAttributes {
            css?: never;
        }
    }
}

export {}

you might have to import react for typescript to grab the types as well

import { } from "react";

[penx]

I'm getting this with:

<animated.meshBasicMaterial />

Doesn't seem to be related to styled-components, I don't have it installed, it's just a basic starter project with:

    "@react-spring/three": "^9.5.5",
    "@react-three/drei": "^9.40.0",
    "@react-three/fiber": "^8.9.1",
    "@react-three/postprocessing": "^2.7.0",
    "@types/three": "^0.146.0",
    "leva": "^0.9.34",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "three": "^0.146.0"
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "typescript": "^4.6.4",
    "vite": "^3.2.3"

[jeffscottward]

Getting this right out of the box for the Animation.tsx example in the React-Three-Fiber library for <a.meshBasicMaterial color={color} />

[ghost]

Same...

[joshuaellis]

There is nothing I believe we can do on our side on this so I'm going to lock this issue.