DEV Community

Anjan Talatam
Anjan Talatam

Posted on

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)
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)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay