React / Next JS error fix

Error

'SomeComponent' cannot be used as a JSX component.
  Its type '(props: ISomeComponentProps) => JSX.Element' is not a valid JSX element type.
    Type '(props: ISomeComponentProps) => JSX.Element' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Element' is not assignable to type 'ReactNode'.
        Property 'children' is missing in type 'Element' but 
          required in type 'ReactPortal'.ts(2786)

Fix:

Go to tsconfig.json
Add the following code under compiler options

"paths": {
   "react": [ "./node_modules/@types/react" ]
 }

Here is how compiler options should look like post-changes

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "paths": {
      "react": [ "./node_modules/@types/react" ]
    }
  }
}

It is telling the typescript compiler that when it encounters a reference to the react module, it should look for the actual implementation in the ./node_modules/@types/react directory.

Blog

React / Next JS error fix

Anjan Talatam

Join Our Newsletter. No Spam, Only the good stuff.

Related