typescript jsx_error ai_generated true

TS2786: 'Component' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element.

ID: typescript/ts-jsx-element-type

Also available as: JSON · Markdown
85%Fix Rate
87%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
5 active — — —

Root Cause

Component return type does not match JSX.Element. Usually caused by mismatched @types/react versions between packages.

generic

Workarounds

  1. 90% success Ensure all packages use the same @types/react version 
    // Add resolutions/overrides to package.json:
// npm:
"overrides": { "@types/react": "^18.2.0" }
// yarn:
"resolutions": { "@types/react": "^18.2.0" }

    Sources: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/65135

  2. 85% success Explicitly type component return as JSX.Element | null 
    function MyComponent(props: Props): JSX.Element | null {
  if (!props.show) return null;
  return <div>{props.children}</div>;
}

    Sources: https://www.typescriptlang.org/docs/handbook/jsx.html

Dead Ends

Common approaches that don't work:

  1. Cast the component to any before using in JSX 70% fail

    Hides the real type mismatch and loses all prop type checking for the component

Error Chain

Leads to:
Preceded by:
Frequently confused with: