CODEWITHSUNDEEP
typescriptreact-nativevisual-studio-codeexpo
Georgemayer
Georgemayer

Reputation: 325

Component cannot be used as a JSX component. Property '$props' is missing in type X but required in type 'ElementClass'

I'm getting this typescript error from basically every component in VSCode, both custom and library components. This is an expo build for react native. This command yields the same results: yarn tsc --project tsconfig.json

here's an example in VSCode enter image description here

and an example of the full error message:

'KeyboardAvoidingView' cannot be used as a JSX component.
  Its instance type 'KeyboardAvoidingView' is not a valid JSX element.
    Property '$props' is missing in type 'TimerMixin & KeyboardAvoidingViewComponent' but required in type 'ElementClass'.ts(2786)

This is my .tsconfig:

{
  "extends": "../../node_modules/expo/tsconfig.base",

  "compilerOptions": {
    "jsx": "react-native",
    "strict": true
  }
}

and this is expo's that it extends:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Expo",

  "compilerOptions": {
    "allowJs": true,
    "esModuleInterop": true,
    "jsx": "react-native",
    "lib": ["DOM", "ESNext"],
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "target": "ESNext"
  },

  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

Upvotes: 2

Views: 2995

Answers (1)

Widad TOUMI
Widad TOUMI

Reputation: 26

I had the same problem I just added this to package.json then run yarn

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

as mentioned here

Upvotes: 1

Related Questions