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

[kirkstrobeck]

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/@types+react@18.2.21/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.

[gluxon]

You're correct that this has "something to do with overriding packages or related".

The error can look a bit funny since it's saying ReactNode is not assignable to ReactNode. What it really means is that there's multiple copies of @types/react in the dependency graph and these ReactNode interfaces are imported from different versions of @types/react. (The TypeScript compiler is doing the best it can though. It's hard for tsc to know that this is what's happening.)

Type 'React.ReactNode' is not assignable to type 'import("[filepath]/node_modules/.pnpm/@types+react@18.2.21/node_modules/@types/react/ts5.0/index").ReactNode'.

Can you take a look at the pnpm-lock.yaml file to confirm that there are multiple copies of @types/react? I would search for /@types/react@ in the lockfile and you should see multiple entries that start with that key under the packages: section.. If that's the case, there's a few ways to fix this:

1. Sometimes pnpm dedupe will remove the additional version.
2. If not, there's usually different packages that request @types/react on non-overlapping semver ranges. (Ex: One package requests @types/react with ^16.0.0 while another requests with ^18.0.0.)

In the later case, you can add a pnpm.overrides entry for @types/react, but I would be cautious since pnpm.overrides can hide compatibility issues that you would later see in production.

[58bits]

TS2786 could also be caused by an out-of-date lock file and node_modules directory. Try removing your pnpm-lock.yaml file, nuking all of your node_modules directories, do a fresh install, update your @types imports, and latest typescript and react versions, and try again.

This solved it for us.