Mismatching React types in pnpm monorepo

Question

i'm trying to convert an inherited monorepo from yarn+lerna to pnpm workspaces

i'm currently getting an error due to mismatching react versions, typescript isn't picking up on the @types/react version that's closest in the tree for some reason

i have a packages/web package that uses react 18 types, and a packages/native package that uses react 16 types.

i have loads of errors in the native package like

'Text' cannot be used as a JSX component.
  Its instance type 'Text' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'import("~/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").ReactNode' is not assignable to type 'import("~/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").ReactNode'.

any idea how to fix this?

Habiliment

just a wild guess, but it might be due to the fact that Yarn probably hoisted everything and pnpm hoist nothing by default, you can try shamefully-hoist – Preceptive

Did you ever figure it out? I am facing the same issue. I also have one package with React 16 and another with React 18. – Mulct

@Tom did you had any luck with this? – Substructure

Answer 1

Sometimes, old dependencies might cause conflicts. To ensure you have a clean environment, try clearing the pnpm cache by running this command:

pnpm cache clear --force

Humming

Answer 2

Run pnpm update --latest -r to recursively update all dependencies to the latest version. This should make all packages use unifirm versions and resolve all or most of the errors.

Sacral