DEV Community

Anjan Talatam
Anjan Talatam

Posted on

React / Next JS error fix

#react #nextjs #typescript

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)
Enter fullscreen mode Exit fullscreen mode

Fix:

  1. Go to tsconfig.json
  2. Add the following code under compiler options 
"paths": {
   "react": [ "./node_modules/@types/react" ]
 }
Enter fullscreen mode Exit fullscreen mode

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" ]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)