-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"Type instantiation is excessively deep and possibly infinite" Typescript error when used with styled-components css prop #1515
Comments
I can't find a link to what the |
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) |
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 |
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. |
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 |
Any work arounds on this one? Hitting the same issue. |
@brancusi see my comment above, it only happens with the |
Also running into the same issue when attempting to use any of the |
@brancusi The work around I found currently was to just wrap the
|
This comment has been minimized.
This comment has been minimized.
The following works for me.
|
Leaving this here as its relevant to tracking the issue – DefinitelyTyped/DefinitelyTyped#31245 |
for anyone who doesn't actually use the
/** @see https://github.com/pmndrs/react-spring/issues/1515 */
declare global {
namespace JSX {
interface IntrinsicAttributes {
css?: never
}
}
}
export {}
"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"
} |
After looking into #1784, we should also track this issue – microsoft/TypeScript#34933 |
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 |
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
|
I'm still seeing this with the following versions ├── @react-spring/three@9.5.5 @christopherjbaker could you show a snippet of the impl that was showing the problem and then resolved? I'm getting the issue specifically on |
Try this:
you might have to import react for typescript to grab the types as well
|
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" |
There is nothing I believe we can do on our side on this so I'm going to lock this issue. |
🐛 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: DefinitelyTyped/DefinitelyTyped#31245 all of which cause this error.
To Reproduce
Steps to reproduce the behavior:
npx create-react-app react-spring-css-prop-error --template typescript
yarn add react-spring styled-components @types/styled-components
/// <reference types="styled-components/cssprop" />
Expected behavior
<animated.div></animated.div>
should have no compilation errorsLink to repro
CodeSandbox repro
Environment
react-spring
v9.1.2react
v17.0.2styled-components
v5.3.0The text was updated successfully, but these errors were encountered: