TypeScript: New error: Type of property 'defaultProps' circularly references itself in mapped type
packages/connected-components/src/header-editor/styled.ts:24:34 - error TS2615: Type of property 'defaultProps' circularly references itself in mapped type 'Pick<ForwardRefExoticComponent<Pick<Pick<any, Exclude<keyof ReactDefaultizedProps<StyledComponentInnerComponent<WithC>, ComponentPropsWithRef<StyledComponentInnerComponent<WithC>>>, StyledComponentInnerAttrs<...> | ... 1 more ... | StyledComponentInnerAttrs<...>> | Exclude<...> | Exclude<...> | Exclude<...>> & Parti...'.
24 export const EditableAuthorTag = styled(AuthorTag)`
~~~~~~~~~~~~~~~~~
Also, I’m seeing each of these errors printed twice.
To repro:
yarntsc -b -f
Note that it fails with a different (apparently unrelated) error in 3.8.
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 52
- Comments: 23
Commits related to this issue
- styled-component4.4.1=>5.0.1, carousel 코드 수정 @types/styled-components 에 버그 5.0.1로 상향 https://github.com/microsoft/TypeScript/issues/37597 — committed to herrero-tranquilo/RE by herrero-tranquilo 4 years ago
- Update @types/styled-components due to breaking change using typescript@^3.9.0 and styled components Fix error that notes that 'default props circularly references itself in mapped type' by updating ... — committed to seas-computing/course-planner by natalynyu 4 years ago
- Update @types/styled-components due to breaking change using typescript@^3.9.0 and styled components Fix error that notes that 'default props circularly references itself in mapped type' by updating ... — committed to seas-computing/course-planner by natalynyu 4 years ago
- Fix complier complaints on styled components We were getting this issue: https://github.com/microsoft/TypeScript/issues/37597 Updating styled-components and types package fixed it. — committed to concord-consortium/geocode by sfentress 4 years ago
- remove modal radius on mobile (#1108) Upgraded to fix issue: https://github.com/microsoft/TypeScript/issues/37597#issuecomment-628149946 — committed to recipeyak/recipeyak by chdsbd 7 months ago
Not sure if that applies for all of us, but it seems that this error appears using
typescript@^3.9.0(particularly after this PR https://github.com/microsoft/TypeScript/pull/36696).This breaking change was mitigated by updating
@types/styled-componentshttps://github.com/DefinitelyTyped/DefinitelyTyped/pull/42619However, this fix was deployed at
v5.0.1of@types/styled-componentswhich coversstyled-components@^5.0.0but, nothing has been deployed for earlier versions (e.g. what would coverstyled-components@^4.0.0)So if you are using
styled-components@^5.0.0simply runif you are using
styled-components@^4.0.0, well then it is more difficult for now, as in essence@types/styled-componentsshould be updated.However, as a temporary fix it is possible to remove
@types/styled-componentsfrom the project, copystyled-components.d.tsfile from@types/styled-components@^4.0.0to your project and make the same fix as in https://github.com/DefinitelyTyped/DefinitelyTyped/pull/42619 e.g.:example content of styled-components.d.ts
and sorry that I’m posting this still on TypeScript repository, where it seems that DefinitelyTyped repository would be a better fit for this issue 😅
Try to use
Thank you, it worked for me.
Having the same issue using Styled Components with React and TypeScript 3.9.2
Any update here? 🤔
I’m having this issue aswell. It turns out that something has fucked up with the latest (or one of the latest) release(-s). I managed to resolve this temporarily by simply downgrading TS version to 3.6.5
Should solve the issue 😄
@jermainedebruyne In VSCode you can find the version picker either by clicking the version number on the right side of the status bar at the bottom edge of the window, or by using the command palette (see pic). From there, choose “Use Workspace Version” instead of “Use VS Code’s Version”.
Issue still persist in version
4.6.2@RyanCavanaughWe didn’t have styled-components installed in our project, yet this gave me the idea of updating the similar @types/ packages we are using, and this worked, so thank you. Updating @types/vuelidate to the latest version (0.7.13) fixed it for me, and this is on the latest version of Typescript (3.9.6).
Letting others know that it may not specifically be one of these packages that is giving their error, but possibly some other type-related package, so it’s worth experimenting.
For me this issue was caused by my IDE (VSCode) using a new version of Typescript (3.9.4) to check typings against an old version of Styled Components (4.3.1).
While upgrading both Typescript and Styled Components to the latest versions is probably the best solution, a quick fix that worked for me was to tell VSCode to use the workspace version of Typescript (3.7.5) instead of the latest version.
Still happening for me… 😢 I’m similarly trying to extend a component like follows:
My relevant packages are “typescript”: “^3.6.5”, “styled-components”: “^5.1.1”, “@types/styled-components”: “^5.1.0”, “@typescript-eslint/eslint-plugin”: “^3.1.0”, “@typescript-eslint/parser”: “^3.1.0”,
Updating
typescriptand@types/styled-componentsto the latest version solved the issue for meSame issue is happening on all imports from
chakra-ui. Basically impossible to use withoutts-ignoringevery single instance of a component.Any guidance?
Try removing the
^from your typescript version to make sure it is actually 3.6.5 and not a higher versionEDIT: I bumped my typescript version to 3.8.3 and afterwards it compiled just fine
@weswigham / @RyanCavanaugh we’re not sure if this is a different issue, but if you need a non-styled-components use case / reproduction for “circularly references itself in mapped type” errors, we have this PR on our open source project:
https://github.com/stephenh/joist-ts/pull/127
That with ~a few lines of change creates errors like:
Understood that isn’t as good as a ~10 line standalone repro, but it’s what we’ve got so far… 😕
This “circular references” error has hit us ~2-3 times on changes we’ve tried to make recently, and we’re really not sure how to approach debugging what the cause it or how to fix/avoid it.
We’re pretty sure this stems from this
Loadedmapped type:https://github.com/stephenh/joist-ts/blob/main/packages/orm/src/EntityManager.ts#L155
Which lets us make “hint-driven” projections of our entity graph (basically turning tedious/boilerpately “must be async” accesses into “just call
.getsync”, and given the connectedness of the entity graph (i.e. an author points to the book and the book points to the author), we assume that this is what sends the TS compiler down a rabbit hole of recursion/something/something/we really don’t know.This problem still exist when some interface extends
Documentfrommongooselibrary, I am ontypescript@4.1.3andmongoose@5.11.11I have my interface defined like this
And then, error is looking like
Type of property 'someProperty' circularly references itself in mapped typeIf this helps anyone I identified that my problem was using
styled-components-modifierswhich calledapplyStyleModifiersinside thecssprop. Removing this got rid of the problem for me.I don’t know if it’s the same error, but we’re having similar sudden circular reference issues in Vue props after trying to upgrade from 3.8.3 to something higher. I bisected all of the releases > 3.8.3 and we tracked down the exact version that breaks: 3.9.0-dev.20200228 (works) -> 3.9.0-dev.20200229 (breaks). These don’t seem to be tagged in git so I’m not sure where they come from to compare them.
I wonder if anyone else having this problem can check if these two versions are where your breaking change happened?