pnpm React Types Monorepo Mismatch

Problem

TypeScript build fails with misleading errors like "'Card' cannot be used as a JSX component" when different packages in a pnpm monorepo have different versions of @types/react.

Context / Trigger Conditions

• Error message: 'X' cannot be used as a JSX component. Its type 'ForwardRefExoticComponent<...>' is not a valid JSX element type.
• Variant: Type 'ReactNode' is not assignable to type 'ReactNode'. Type 'ReactElement<unknown, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
• When it happens: After adding a new package to a monorepo, or when packages have divergent dependencies
• Misleading aspect: The error suggests the component itself is wrong, but the actual issue is type version mismatch

Solution

Step 1: Diagnose the version mismatch