Property 'h1' is incompatible with index signature in v6

[hbsnow]

I specified HeadingComponent for h1 in components, but encountered an error.

JSX.Element; img: NormalComponent; h1: HeadingComponent; blockquote: (props: { ...; }) => JSX.Element; table: (props: { ...; }) => JSX.Element; }' is not assignable to type 'Partial<NormalComponents & SpecialComponents>'.
  Property 'h1' is incompatible with index signature.
    Type 'HeadingComponent' is not assignable to type 'string | number | NormalComponent | undefined'.
      Type 'HeadingComponent' is not assignable to type 'NormalComponent'.
        Types of parameters 'props' and 'props' are incompatible.
          Type 'ReactBaseProps & ReactMarkdownProps' is not assignable to type 'ReactBaseProps & ReactMarkdownProps & { level: number; }'.
            Property 'level' is missing in type 'ReactBaseProps & ReactMarkdownProps' but required in type '{ level: number; }'.

HeadingComponent always has a level, so it seems that NormalComponent does not have a compliant index signature.

export type NormalComponents = Record<
  Exclude<ReactMarkdownNames, keyof SpecialComponents>,
  NormalComponent | ReactMarkdownNames
>

Exclude<ReactMarkdownNames, keyof SpecialComponents> is string 😢

[wooorm]

The error message basically says that you didn’t type your HeadingComponent as the expected heading component (https://github.com/remarkjs/react-markdown/blob/15b4757082cf3f32a25eba0b8ea30baf751a8b40/src/ast-to-react.js#L100-L102) though?

[hbsnow]

Thanks, I couldn't come up with a good solution to this problem in the end.

I made the HeadingComponent a string by assertion.

h1: (heading as unknown) as string