pnpm workspaces – 'Foo' cannot be used as a JSX component

Question

When I run ./node_modules/.bin/tsc --noEmit I get the following error:

[filepath]/component.tsx:17:4 - error TS2786: 'ContainerA' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<ContainerB, any, any> | null' is not a valid JSX element.
    Type 'Component<ContainerB, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<ContainerB, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("[filepath]/node_modules/.pnpm/@[email protected]/node_modules/@types/react/ts5.0/index").ReactNode'.

17   <ContainerA flowName={pageProps?.data?.foo}>

How can I resolve this?

I suspect the strategy has something to do with overriding packages or related.

Answer 1

Make sure you're using the same version of @types/react / react in all of your workspaces