React Native monorepo：TS2786：“视图”不能用作 JSX 组件

Question

I have a monorepo with the following structure:

repo/
├─ node_modules/
├─ package.json
├─ packages/
│  ├─ design-system/
│  │  ├─ package.json // dependencies installed in repo/node_modules
├─ apps/
│  ├─ my-app/
│  │  ├─ node_modules/
│  │  ├─ package.json // dependencies installed in my-app/node_modules

repo/packages contains shared packages to be used by various apps in repo/apps. Shared packages have their dependencies in repo/node_modules, managed via Yarn Workspaces in the top level package.json:

"workspaces": [
  "packages/*"
]

repo/apps contains React Native apps. Apps in repo/apps have their own local node_modules and are NOT Yarn Workspaces (I decided against that because managing React Native dependencies with Yarn Workspaces was too cumbersome and flaky).

My current workflow is to run yarn install in the top level dir, then cd into repo/apps/my-app and run yarn install to install the local node_modules.

This has been working well, until now...

I have a design-system shared package with the following deps:

"devDependencies": {
  "@types/react": "17.0.2",
  "@types/react-native": "^0.67.1"
},
"peerDependencies": {
  "react": "17.0.2",
  "react-dom": "16.3.1",
  "react-native": "0.67.3"
}

my-app/package.json has many many dependencies, but I think the relevant one here is:

"devDependencies": {
  "@types/react-native": "^0.67.1"
}

(note how "@types/react": "17.0.2" is NOT a dependency of my-app. I have tried adding it, did not change anything).

When I import it in a component in my-app , I get the following error:

import { Button } from 'design-system'
import { View } from 'react-native'

const AppComponent = () => (
  <View> // error TS2786
    <Button/>
  </View>
)

TS2786: 'View' cannot be used as a JSX component.
   Its instance type 'View' is not a valid JSX element.
     The types returned by 'render()' are incompatible between these types.
       Type 'React.ReactNode' is not assignable to type 'import("/Users/sam/repo/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.
         Type '{}' is not assignable to type 'ReactNode'.

What I understand from this error is that there is a conflict between the ReactNode type in the top level node_modules vs the one in the app node_modules.

My question is how and where do i fix this?

• in repo/package.json?
• in design-system/package.json?
• in my-app/package.json?
• in my-app/tsconfig.json?
• somewhere else???

Answer 1

The answer was right here .

After inspecting my top level yarn.lock, I found that React 18 was indeed making its way into it.

"@types/react@*":
  version "18.0.9"

I had to add resolutions in the top level package.json:

// repo/package.json

"resolutions": {
  "@types/react": "17.0.2",
  "@types/react-dom": "17.0.2"
},

Which then changed the lock file to

"@types/react@*", "@types/react@17.0.2":
  version "17.0.2"

And the errors went away 🥳 🕊