New error: Type of property 'defaultProps' circularly references itself in mapped type #37597

amcasey · 2020-03-25T20:22:51Z

https://github.com/nteract/nteract/blob/af734c46893146c617308f4ae1e40bf267e8875f/packages/connected-components/src/header-editor/styled.ts#L24

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)`
                                    ~~~~~~~~~~~~~~~~~

https://github.com/nteract/nteract/blob/af734c46893146c617308f4ae1e40bf267e8875f/packages/presentational-components/src/components/prompt.tsx#L85

Also, I'm seeing each of these errors printed twice.

To repro:

yarn
tsc -b -f

Note that it fails with a different (apparently unrelated) error in 3.8.

The text was updated successfully, but these errors were encountered:

chin2km · 2020-05-13T09:16:48Z

Any update here? 🤔

loolooii · 2020-05-13T13:56:03Z

Having the same issue using Styled Components with React and TypeScript 3.9.2

theLiudas · 2020-05-13T14:47:23Z

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

npm i -D [email protected]

Should solve the issue 😄

VladKabantsov · 2020-05-13T15:00:22Z

Try to use

export const EditableAuthorTag = styled(AuthorTag as any)

kimmikirino · 2020-05-13T16:06:18Z

Try to use

export const EditableAuthorTag = styled(AuthorTag as any)

Thank you, it worked for me.

lukaskl · 2020-05-13T17:54:30Z

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 #36696).

This breaking change was mitigated by updating @types/styled-components DefinitelyTyped/DefinitelyTyped#42619

However, this fix was deployed at v5.0.1 of @types/styled-components which covers styled-components@^5.0.0
but, nothing has been deployed for earlier versions (e.g. what would cover styled-components@^4.0.0)

So if you are using styled-components@^5.0.0 simply run

yarn upgrade @types/styled-components --latest
# or
npm install @types/styled-components@latest

if you are using styled-components@^4.0.0, well then it is more difficult for now, as in essence @types/styled-components should be updated.

However, as a temporary fix it is possible to remove @types/styled-components from the project, copy styled-components.d.ts file from @types/styled-components@^4.0.0 to your project and make the same fix as in DefinitelyTyped/DefinitelyTyped#42619 e.g.:

example content of styled-components.d.ts

// forward declarations
declare global {
  namespace NodeJS {
      // tslint:disable-next-line:no-empty-interface
      interface ReadableStream {}
  }
}

declare module 'styled-components' {

  import * as CSS from "csstype";
  import * as React from "react";
  import * as hoistNonReactStatics from 'hoist-non-react-statics';

  export type CSSProperties = CSS.Properties<string | number>;

  export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject };

  export interface CSSObject extends CSSProperties, CSSPseudos {
    [key: string]: CSSObject | string | number | undefined;
  }

  export type CSSKeyframes = object & { [key: string]: CSSObject };

  export interface ThemeProps<T> {
    theme: T;
  }

  export type ThemedStyledProps<P, T> = P & ThemeProps<T>;
  export type StyledProps<P> = ThemedStyledProps<P, AnyIfEmpty<DefaultTheme>>;

  // Any prop that has a default prop becomes optional, but its type is unchanged
  // Undeclared default props are augmented into the resulting allowable attributes
  // If declared props have indexed properties, ignore default props entirely as keyof gets widened
  // Wrap in an outer-level conditional type to allow distribution over props that are unions
  type Defaultize<P, D> = P extends any
    ? string extends keyof P ? P :
        & Pick<P, Exclude<keyof P, keyof D>>
        & Partial<Pick<P, Extract<keyof P, keyof D>>>
        & Partial<Pick<D, Exclude<keyof D, keyof P>>>
    : never;

  type ReactDefaultizedProps<C, P> = C extends { defaultProps: infer D; }
    ? Defaultize<P, D>
    : P;

  export type StyledComponentProps<
    // The Component from whose props are derived
    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
    // The Theme from the current context
    T extends object,
    // The other props added by the template
    O extends object,
    // The props that are made optional by .attrs
    A extends keyof any
  > =
    // Distribute O if O is a union type
    O extends object
    ? WithOptionalTheme<
          Omit<ReactDefaultizedProps<C, React.ComponentPropsWithRef<C>> & O, A> &
              Partial<Pick<React.ComponentPropsWithRef<C> & O, A>>,
          T
      > &
          WithChildrenIfReactComponentClass<C>
    : never;

  // Because of React typing quirks, when getting props from a React.ComponentClass,
  // we need to manually add a `children` field.
  // See https://github.com/DefinitelyTyped/DefinitelyTyped/pull/31945
  // and https://github.com/DefinitelyTyped/DefinitelyTyped/pull/32843
  type WithChildrenIfReactComponentClass<
    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>
  > = C extends React.ComponentClass<any> ? { children?: React.ReactNode } : {};

  type StyledComponentPropsWithAs<
    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
    T extends object,
    O extends object,
    A extends keyof any
  > = StyledComponentProps<C, T, O, A> & { as?: C, forwardedAs?: C };

  export type FalseyValue = undefined | null | false;
  export type Interpolation<P> =
    | InterpolationValue
    | InterpolationFunction<P>
    | FlattenInterpolation<P>;
  // cannot be made a self-referential interface, breaks WithPropNested
  // see https://github.com/microsoft/TypeScript/issues/34796
  export type FlattenInterpolation<P> = ReadonlyArray<Interpolation<P>>;
  export type InterpolationValue =
    | string
    | number
    | FalseyValue
    | Keyframes
    | StyledComponentInterpolation
    | CSSObject;
  export type SimpleInterpolation =
    | InterpolationValue
    | FlattenSimpleInterpolation;
  export type FlattenSimpleInterpolation = ReadonlyArray<SimpleInterpolation>;

  export type InterpolationFunction<P> = (props: P) => Interpolation<P>;

  type Attrs<P, A extends Partial<P>, T> =
    | ((props: ThemedStyledProps<P, T>) => A)
    | A;
  type DeprecatedAttrs<P, A extends Partial<P>, T> = {
    [K in keyof A]: ((props: ThemedStyledProps<P, T>) => A[K]) | A[K]
  };

  export type ThemedGlobalStyledClassProps<P, T> = WithOptionalTheme<P, T> & {
    suppressMultiMountWarning?: boolean;
  };

  export interface GlobalStyleComponent<P, T>
    extends React.ComponentClass<ThemedGlobalStyledClassProps<P, T>> {}

  // remove the call signature from StyledComponent so Interpolation can still infer InterpolationFunction
  type StyledComponentInterpolation =
    | Pick<
          StyledComponentBase<any, any, any, any>,
          keyof StyledComponentBase<any, any>
      >
    | Pick<
          StyledComponentBase<any, any, any>,
          keyof StyledComponentBase<any, any>
      >;

  // abuse Pick to strip the call signature from ForwardRefExoticComponent
  type ForwardRefExoticBase<P> = Pick<
    React.ForwardRefExoticComponent<P>,
    keyof React.ForwardRefExoticComponent<any>
  >;

  // extracts React defaultProps
  type ReactDefaultProps<C> = C extends { defaultProps: infer D; } ? D : never;

  // any doesn't count as assignable to never in the extends clause, and we default A to never
  export type AnyStyledComponent =
    | StyledComponent<any, any, any, any>
    | StyledComponent<any, any, any>;

  export type StyledComponent<
    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
    T extends object,
    O extends object = {},
    A extends keyof any = never
  > = // the "string" allows this to be used as an object key
    // I really want to avoid this if possible but it's the only way to use nesting with object styles...
    string & StyledComponentBase<C, T, O, A> & hoistNonReactStatics.NonReactStatics<C extends React.ComponentType<any> ? C : never>;

  export interface StyledComponentBase<
    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
    T extends object,
    O extends object = {},
    A extends keyof any = never
  > extends ForwardRefExoticBase<StyledComponentProps<C, T, O, A>> {
    // add our own fake call signature to implement the polymorphic 'as' prop
    (
        props: StyledComponentProps<C, T, O, A> & { as?: never, forwardedAs?: never }
      ): React.ReactElement<StyledComponentProps<C, T, O, A>>;
    <AsC extends keyof JSX.IntrinsicElements | React.ComponentType<any> = C>(
      props: StyledComponentPropsWithAs<AsC, T, O, A>
    ): React.ReactElement<StyledComponentPropsWithAs<AsC, T, O, A>>;

    withComponent<WithC extends AnyStyledComponent>(
        component: WithC
    ): StyledComponent<
        StyledComponentInnerComponent<WithC>,
        T,
        O & StyledComponentInnerOtherProps<WithC>,
        A | StyledComponentInnerAttrs<WithC>
    >;
    withComponent<
        WithC extends keyof JSX.IntrinsicElements | React.ComponentType<any>
    >(
        component: WithC
    ): StyledComponent<WithC, T, O, A>;
  }

  export interface ThemedStyledFunctionBase<
    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
    T extends object,
    O extends object = {},
    A extends keyof any = never
  > {
    (first: TemplateStringsArray): StyledComponent<C, T, O, A>;
    (
        first:
            | TemplateStringsArray
            | CSSObject
            | InterpolationFunction<
                  ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>
              >,
        ...rest: Array<
            Interpolation<
                ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>
            >
        >
    ): StyledComponent<C, T, O, A>;
    <U extends object>(
        first:
            | TemplateStringsArray
            | CSSObject
            | InterpolationFunction<
                  ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>
              >,
        ...rest: Array<
            Interpolation<
                ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>
            >
        >
    ): StyledComponent<C, T, O & U, A>;
  }

  export interface ThemedStyledFunction<
    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
    T extends object,
    O extends object = {},
    A extends keyof any = never
  > extends ThemedStyledFunctionBase<C, T, O, A> {
    // Fun thing: 'attrs' can also provide a polymorphic 'as' prop
    // My head already hurts enough so maybe later...
    attrs<
        U,
        NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {
            [others: string]: any;
        } = {}
    >(
        attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>
    ): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;
    // Only this overload is deprecated
    // tslint:disable:unified-signatures
    /** @deprecated Prefer using the new single function style, to be removed in v5 */
    attrs<
        U,
        NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {
            [others: string]: any;
        } = {}
    >(
        attrs: DeprecatedAttrs<StyledComponentPropsWithRef<C> & U, NewA, T>
    ): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;
    // tslint:enable:unified-signatures
  }

  export type StyledFunction<
    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>
  > = ThemedStyledFunction<C, any>;

  type ThemedStyledComponentFactories<T extends object> = {
    [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<TTag, T>
  };

  export type StyledComponentInnerComponent<
    C extends React.ComponentType<any>
  > = C extends StyledComponent<infer I, any, any, any> ? I :
    C extends StyledComponent<infer I, any, any> ? I :
    C;
  export type StyledComponentPropsWithRef<
    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>
  > = C extends AnyStyledComponent
    ? React.ComponentPropsWithRef<StyledComponentInnerComponent<C>>
    : React.ComponentPropsWithRef<C>;
  export type StyledComponentInnerOtherProps<C extends AnyStyledComponent> =
    C extends StyledComponent<any, any, infer O, any> ? O :
    C extends StyledComponent<any, any, infer O> ? O :
    never;
  export type StyledComponentInnerAttrs<
    C extends AnyStyledComponent
  > = C extends StyledComponent<any, any, any, infer A> ? A : never;

  export interface ThemedBaseStyledInterface<T extends object>
    extends ThemedStyledComponentFactories<T> {
    <C extends AnyStyledComponent>(component: C): ThemedStyledFunction<
        StyledComponentInnerComponent<C>,
        T,
        StyledComponentInnerOtherProps<C>,
        StyledComponentInnerAttrs<C>
    >;
    <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
        // unfortunately using a conditional type to validate that it can receive a `theme?: Theme`
        // causes tests to fail in TS 3.1
        component: C
    ): ThemedStyledFunction<C, T>;
  }

  export type ThemedStyledInterface<T extends object> = ThemedBaseStyledInterface<
    AnyIfEmpty<T>
  >;
  export type StyledInterface = ThemedStyledInterface<DefaultTheme>;

  export interface BaseThemedCssFunction<T extends object> {
    (
        first: TemplateStringsArray | CSSObject,
        ...interpolations: SimpleInterpolation[]
    ): FlattenSimpleInterpolation;
    (
        first:
            | TemplateStringsArray
            | CSSObject
            | InterpolationFunction<ThemedStyledProps<{}, T>>,
        ...interpolations: Array<Interpolation<ThemedStyledProps<{}, T>>>
    ): FlattenInterpolation<ThemedStyledProps<{}, T>>;
    <P extends object>(
        first:
            | TemplateStringsArray
            | CSSObject
            | InterpolationFunction<ThemedStyledProps<P, T>>,
        ...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
    ): FlattenInterpolation<ThemedStyledProps<P, T>>;
  }

  export type ThemedCssFunction<T extends object> = BaseThemedCssFunction<
    AnyIfEmpty<T>
  >;

  // Helper type operators
  type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
  type WithOptionalTheme<P extends { theme?: T }, T> = Omit<P, "theme"> & {
    theme?: T;
  };
  type AnyIfEmpty<T extends object> = keyof T extends never ? any : T;

  export interface ThemedStyledComponentsModule<
    T extends object,
    U extends object = T
  > {
    default: ThemedStyledInterface<T>;

    css: ThemedCssFunction<T>;

    // unfortunately keyframes can't interpolate props from the theme
    keyframes(
        strings: TemplateStringsArray | CSSKeyframes,
        ...interpolations: SimpleInterpolation[]
    ): Keyframes;

    createGlobalStyle<P extends object = {}>(
        first:
            | TemplateStringsArray
            | CSSObject
            | InterpolationFunction<ThemedStyledProps<P, T>>,
        ...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
    ): GlobalStyleComponent<P, T>;

    withTheme: WithThemeFnInterface<T>;
    ThemeProvider: ThemeProviderComponent<T, U>;
    ThemeConsumer: React.Consumer<T>;
    ThemeContext: React.Context<T>;

    // This could be made to assert `target is StyledComponent<any, T>` instead, but that feels not type safe
    isStyledComponent: typeof isStyledComponent;

    ServerStyleSheet: typeof ServerStyleSheet;
    StyleSheetManager: typeof StyleSheetManager;
  }

  declare const styled: StyledInterface;

  export const css: ThemedCssFunction<DefaultTheme>;

  export type BaseWithThemeFnInterface<T extends object> = <
    C extends React.ComponentType<any>
  >(
    // this check is roundabout because the extends clause above would
    // not allow any component that accepts _more_ than theme as a prop
    component: React.ComponentProps<C> extends { theme?: T } ? C : never
  ) => React.ForwardRefExoticComponent<
    WithOptionalTheme<React.ComponentPropsWithRef<C>, T>
  >;
  export type WithThemeFnInterface<T extends object> = BaseWithThemeFnInterface<
    AnyIfEmpty<T>
  >;
  export const withTheme: WithThemeFnInterface<DefaultTheme>;

  /**
  * This interface can be augmented by users to add types to `styled-components`' default theme
  * without needing to reexport `ThemedStyledComponentsModule`.
  */
  // Unfortunately, there is no way to write tests for this
  // as any augmentation will break the tests for the default case (not augmented).
  // tslint:disable-next-line:no-empty-interface
  export interface DefaultTheme {}

  export interface ThemeProviderProps<T extends object, U extends object = T> {
    children?: React.ReactNode;
    theme: T | ((theme: U) => T);
  }
  export type BaseThemeProviderComponent<
    T extends object,
    U extends object = T
  > = React.ComponentClass<ThemeProviderProps<T, U>>;
  export type ThemeProviderComponent<
    T extends object,
    U extends object = T
  > = BaseThemeProviderComponent<AnyIfEmpty<T>, AnyIfEmpty<U>>;
  export const ThemeProvider: ThemeProviderComponent<AnyIfEmpty<DefaultTheme>>;
  // NOTE: this technically starts as undefined, but allowing undefined is unhelpful when used correctly
  export const ThemeContext: React.Context<AnyIfEmpty<DefaultTheme>>;
  export const ThemeConsumer: typeof ThemeContext["Consumer"];

  export interface Keyframes {
    getName(): string;
  }

  export function keyframes(
    strings: TemplateStringsArray | CSSKeyframes,
    ...interpolations: SimpleInterpolation[]
  ): Keyframes;

  export function createGlobalStyle<P extends object = {}>(
    first:
        | TemplateStringsArray
        | CSSObject
        | InterpolationFunction<ThemedStyledProps<P, DefaultTheme>>,
    ...interpolations: Array<Interpolation<ThemedStyledProps<P, DefaultTheme>>>
  ): GlobalStyleComponent<P, DefaultTheme>;

  export function isStyledComponent(
    target: any
  ): target is StyledComponent<any, any>;

  export class ServerStyleSheet {
    collectStyles(
        tree: React.ReactNode
    ): React.ReactElement<{ sheet: ServerStyleSheet }>;

    getStyleTags(): string;
    getStyleElement(): Array<React.ReactElement<{}>>;
    interleaveWithNodeStream(
        readableStream: NodeJS.ReadableStream
    ): NodeJS.ReadableStream;
    readonly instance: this;
    seal(): void;
  }

  type StyleSheetManagerProps =
    | {
          sheet: ServerStyleSheet;
          target?: never;
      }
    | {
          sheet?: never;
          target: HTMLElement;
      };

  export class StyleSheetManager extends React.Component<
    StyleSheetManagerProps
  > {}

  /**
  * The CSS prop is not declared by default in the types as it would cause 'css' to be present
  * on the types of anything that uses styled-components indirectly, even if they do not use the
  * babel plugin.
  *
  * You can load a default declaration by using writing this special import from
  * a typescript file. This module does not exist in reality, which is why the {} is important:
  *
  * ```ts
  * import {} from 'styled-components/cssprop'
  * ```
  *
  * Or you can declare your own module augmentation, which allows you to specify the type of Theme:
  *
  * ```ts
  * import { CSSProp } from 'styled-components'
  *
  * interface MyTheme {}
  *
  * declare module 'react' {
  *   interface Attributes {
  *     css?: CSSProp<MyTheme>
  *   }
  * }
  * ```
  */
  // ONLY string literals and inline invocations of css`` are supported, anything else crashes the plugin
  export type CSSProp<T = AnyIfEmpty<DefaultTheme>> =
    | string
    | CSSObject
    | FlattenInterpolation<ThemeProps<T>>;

  export default styled;
}

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 😅

AdamAnSubtractM · 2020-05-22T14:26:32Z

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 #36696).

This breaking change was mitigated by updating @types/styled-components DefinitelyTyped/DefinitelyTyped#42619

However, this fix was deployed at v5.0.1 of @types/styled-components which covers styled-components@^5.0.0
but, nothing has been deployed for earlier versions (e.g. what would cover styled-components@^4.0.0)

So if you are using styled-components@^5.0.0 simply run
yarn upgrade @types/styled-components --latest
# or
npm install @types/styled-components@latest
if you are using styled-components@^4.0.0, well then it is more difficult for now, as in essence @types/styled-components should be updated.

However, as a temporary fix it is possible to remove @types/styled-components from the project, copy styled-components.d.ts file from @types/styled-components@^4.0.0 to your project and make the same fix as in DefinitelyTyped/DefinitelyTyped#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 😅

Upgrading the types worked for me. Thank you! 🙏

sopianguyen · 2020-06-02T02:06:14Z

Still happening for me.. :'( I'm similarly trying to extend a component like follows:

Type of property 'defaultProps' circularly references itself in mapped type 'Pick<ForwardRefExoticComponent<Pick<Pick<any, Exclude<keyof ReactDefaultizedProps<StyledComponentInnerComponent<WithC>, ComponentPropsWithRef<StyledComponentInnerComponent<WithC>>>, any>> & Partial<...>, any> & { ...; } & WithChildrenIfReactComponentClass<...>>, "defaultProps" | ... 2 more ... | "$$typeof">'.  TS2615

    28 | `;
    29 | 
  > 30 | export const PrimaryButton = styled(Button)`
       |                              ^
    31 |   background-color: ${props => props.theme.primaryColor};
    32 |   border: none;
    33 |   color: ${props => props.theme.textColorOnPrimary};

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

elertan · 2020-06-02T08:49:21Z

Still happening for me.. :'( I'm similarly trying to extend a component like follows:

Type of property 'defaultProps' circularly references itself in mapped type 'Pick<ForwardRefExoticComponent<Pick<Pick<any, Exclude<keyof ReactDefaultizedProps<StyledComponentInnerComponent<WithC>, ComponentPropsWithRef<StyledComponentInnerComponent<WithC>>>, any>> & Partial<...>, any> & { ...; } & WithChildrenIfReactComponentClass<...>>, "defaultProps" | ... 2 more ... | "$$typeof">'.  TS2615

    28 | `;
    29 | 
  > 30 | export const PrimaryButton = styled(Button)`
       |                              ^
    31 |   background-color: ${props => props.theme.primaryColor};
    32 |   border: none;
    33 |   color: ${props => props.theme.textColorOnPrimary};

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

Try removing the ^ from your typescript version to make sure it is actually 3.6.5 and not a higher version

EDIT:
I bumped my typescript version to 3.8.3 and afterwards it compiled just fine

@types/styled-components 에 버그 5.0.1로 상향 microsoft/TypeScript#37597

Oulander · 2020-06-16T11:46:46Z

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.

…pt@^3.9.0 and styled components Fix error that notes that 'default props circularly references itself in mapped type' by updating styled components version. A fix for this was made through v5.0.1 of @types/styled-components per this thread on github: microsoft/TypeScript#37597

jermainedebruyne · 2020-06-29T15:20:34Z

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.

would be nice to know where you would configure this @Oulander

Oulander · 2020-06-29T15:52:25Z

would be nice to know where you would configure this @Oulander

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

jermainedebruyne · 2020-06-29T18:44:57Z

would be nice to know where you would configure this @Oulander

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

Thanks! My problem was that I had 1 VSCode window for multiple repos. Then the version is not simply in the root of one project. Therefore I had to switch to multiple VSCode windows... Not optimal.. I also applied your suggestion 👍

stephenh · 2021-05-26T21:11:27Z

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

joist-orm/joist-orm#127

That with ~a few lines of change creates errors like:

packages/integration-tests/src/entities/AuthorCodegen.ts:124:29 - error TS2615: Type of property 'book' circularly references itself in mapped type '{ fileName: "fileName"; type: "type"; author: "author"; book: "book"; publisher: "publisher"; }'.

124 export const authorConfig = new ConfigApi<Author, Context>();
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

packages/integration-tests/src/entities/AuthorCodegen.ts:124:29 - error TS2615: Type of property 'book' circularly references itself in mapped type '{ fileName: FieldStatus<string>; type: FieldStatus<ImageType.BookImage> | FieldStatus<ImageType.AuthorImage> | FieldStatus<ImageType.PublisherImage>; author: FieldStatus<...>; book: FieldStatus<...>; publisher: FieldStatus<...>; }'.

124 export const authorConfig = new ConfigApi<Author, Context>();

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 Loaded mapped 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 .get sync", 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.

Crizzooo · 2021-08-13T16:43:36Z

Same issue is happening on all imports from chakra-ui. Basically impossible to use without ts-ignoring every single instance of a component.

../../packages/titan-chakra/src/components/Text.tsx:5:10 - error TS2615: Type of property 'defaultProps' circularly references itself in mapped type 'ForwardRefExoticBase<Omit<Omit<any, any> & Partial<Pick<any, any>>, "theme"> & { theme?: any; } & WithChildrenIfReactComponentClass<StyledComponentInnerComponent<WithC>>>'.

5   return <Text fontSize="sm">hello</Text>;
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Any guidance?

nhhockeyplayer · 2021-12-21T13:14:39Z

seems to be buried in the mongoose generics defs
those signatures appear to be klomped on klomp over time

its a matter if reworking your generics
<T>
and constraint
<T extends {id: Types.ObjectId | string | number}>
generics signatures
and actual call signatures

I could be wrong but thats where I am at modeling my own custom DIY repositories for back end entity mgt

Tomas2D · 2022-03-14T10:22:17Z

Issue still persist in version 4.6.2 @RyanCavanaugh

Upgraded to fix issue: microsoft/TypeScript#37597 (comment)

amcasey added this to the TypeScript 3.9.1 milestone Mar 25, 2020

infi-pc mentioned this issue Mar 27, 2020

Error: Type alias circularly references itself - when using array #37649

Closed

RyanCavanaugh added the Docs The issue relates to how you learn TypeScript label Apr 20, 2020

RyanCavanaugh assigned weswigham May 13, 2020

RyanCavanaugh added Needs Investigation This issue needs a team member to investigate its status. and removed Docs The issue relates to how you learn TypeScript labels May 13, 2020

RyanCavanaugh modified the milestones: TypeScript 3.9.1, TypeScript 4.0 May 13, 2020

mintyfloss mentioned this issue May 22, 2020

Fix circular dep error RetailMeNot/anchor#207

Merged

14 tasks

SonyaMoisset mentioned this issue May 27, 2020

DSO-9 📦 Regenerate yarn.lock file PrideInLondon/pride-london-web#1493

Closed

alexandercerutti mentioned this issue May 29, 2020

node_modules/@types/react-native/globals.d.ts (36,15): Duplicate identifier 'FormData'. DefinitelyTyped/DefinitelyTyped#33311

Closed

4 tasks

hzhu mentioned this issue Jun 4, 2020

chore(deps): update non-major shared dependencies zendeskgarden/react-components#761

Merged

1 task

herrero-tranquilo added a commit to herrero-tranquilo/RE that referenced this issue Jun 12, 2020

styled-component4.4.1=>5.0.1, carousel 코드 수정

d6c389e

@types/styled-components 에 버그 5.0.1로 상향 microsoft/TypeScript#37597

deraw mentioned this issue Jun 12, 2020

Update dependency typescript to v3.9.5 assurance-maladie-digital/design-system#336

Closed

1 task

RyanCavanaugh modified the milestones: TypeScript 4.0, Typescript 4.0.1 Jun 29, 2020

RyanCavanaugh modified the milestones: TypeScript 4.3.1, TypeScript 4.4.1 (RC) Jun 18, 2021

andrewbranch modified the milestones: TypeScript 4.4.1 (RC), TypeScript 4.5.0 Aug 31, 2021

RyanCavanaugh modified the milestones: TypeScript 4.5.0, TypeScript 4.6.0 Dec 15, 2021

nbbeeken mentioned this issue Jan 5, 2022

types(NODE-3563): make update filter types stricter mongodb/node-mongodb-native#3043

Closed

5 tasks

RyanCavanaugh modified the milestones: TypeScript 4.6.0, TypeScript 4.6.1 Feb 3, 2022

RyanCavanaugh modified the milestones: TypeScript 4.6.1, TypeScript 4.7.1 Mar 14, 2022

dimitropoulos mentioned this issue Apr 4, 2022

chore(deps): styled-components Kong/insomnia#4669

Merged

DanielRosenwasser modified the milestones: TypeScript 4.7.1, TypeScript 4.8.0 May 13, 2022

hasezoey mentioned this issue Aug 14, 2022

Type instantiation is excessively deep and possibly infinite.ts(2589) typegoose/typegoose#752

Closed

B4nan mentioned this issue Dec 4, 2022

feat(core): return loaded type when populating a reference mikro-orm/mikro-orm#3756

Closed

RyanCavanaugh modified the milestones: TypeScript 4.8.0, TypeScript 5.1.0 Feb 1, 2023

joshuaellis mentioned this issue Oct 16, 2023

feat(cloud): add strapi cloud plugin to CMS for marketing strapi/strapi#18209

Merged

Parsium mentioned this issue Nov 23, 2023

chore: upgrade to node version 20 (FE-6252) Sage/carbon#6424

Merged

19 tasks

chdsbd mentioned this issue Nov 24, 2023

remove modal radius on mobile recipeyak/recipeyak#1108

Merged

kodiakhq bot pushed a commit to recipeyak/recipeyak that referenced this issue Nov 24, 2023

remove modal radius on mobile (#1108)

4c00e2c

Upgraded to fix issue: microsoft/TypeScript#37597 (comment)

RyanCavanaugh modified the milestones: TypeScript 5.1.0, TypeScript 5.5.0 Mar 4, 2024

RyanCavanaugh modified the milestones: TypeScript 5.5.0, TypeScript 5.7.0 Jul 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New error: Type of property 'defaultProps' circularly references itself in mapped type #37597

New error: Type of property 'defaultProps' circularly references itself in mapped type #37597

amcasey commented Mar 25, 2020

chin2km commented May 13, 2020

loolooii commented May 13, 2020 •

edited

Loading

theLiudas commented May 13, 2020 •

edited

Loading

VladKabantsov commented May 13, 2020 •

edited

Loading

kimmikirino commented May 13, 2020

lukaskl commented May 13, 2020 •

edited

Loading

AdamAnSubtractM commented May 22, 2020

sopianguyen commented Jun 2, 2020

elertan commented Jun 2, 2020 •

edited

Loading

Oulander commented Jun 16, 2020

jermainedebruyne commented Jun 29, 2020

Oulander commented Jun 29, 2020 •

edited

Loading

jermainedebruyne commented Jun 29, 2020

stephenh commented May 26, 2021 •

edited

Loading

Crizzooo commented Aug 13, 2021

nhhockeyplayer commented Dec 21, 2021 •

edited

Loading

Tomas2D commented Mar 14, 2022 •

edited

Loading

New error: Type of property 'defaultProps' circularly references itself in mapped type #37597

New error: Type of property 'defaultProps' circularly references itself in mapped type #37597

Comments

amcasey commented Mar 25, 2020

chin2km commented May 13, 2020

loolooii commented May 13, 2020 • edited Loading

theLiudas commented May 13, 2020 • edited Loading

VladKabantsov commented May 13, 2020 • edited Loading

kimmikirino commented May 13, 2020

lukaskl commented May 13, 2020 • edited Loading

AdamAnSubtractM commented May 22, 2020

sopianguyen commented Jun 2, 2020

elertan commented Jun 2, 2020 • edited Loading

Oulander commented Jun 16, 2020

jermainedebruyne commented Jun 29, 2020

Oulander commented Jun 29, 2020 • edited Loading

jermainedebruyne commented Jun 29, 2020

stephenh commented May 26, 2021 • edited Loading

Crizzooo commented Aug 13, 2021

nhhockeyplayer commented Dec 21, 2021 • edited Loading

Tomas2D commented Mar 14, 2022 • edited Loading

loolooii commented May 13, 2020 •

edited

Loading

theLiudas commented May 13, 2020 •

edited

Loading

VladKabantsov commented May 13, 2020 •

edited

Loading

lukaskl commented May 13, 2020 •

edited

Loading

elertan commented Jun 2, 2020 •

edited

Loading

Oulander commented Jun 29, 2020 •

edited

Loading

stephenh commented May 26, 2021 •

edited

Loading

nhhockeyplayer commented Dec 21, 2021 •

edited

Loading

Tomas2D commented Mar 14, 2022 •

edited

Loading