TS2786
TypeScript Compiler Error
Severity: ModerateWhat Does This Error Mean?
TS2786 means TypeScript cannot verify that a function or class can be used as a React JSX component. The most common cause is a version mismatch between @types/react and your TypeScript version. Upgrading @types/react to 18.x usually fixes it.
Affected Models
- TypeScript 4.9+
- React 18+ with older @types/react
- Next.js 13+ projects
Common Causes
- Version mismatch between @types/react and TypeScript
- Component return type is not compatible with JSX.Element or ReactNode
- Using React 18 with @types/react 17 type definitions
- Component defined with incorrect generic type parameters
- Incompatible peer dependencies after an npm update
How to Fix It
-
Update @types/react and @types/react-dom to the version matching your React installation.
Run: npm install --save-dev @types/react@latest @types/react-dom@latest This resolves the vast majority of TS2786 errors caused by React 18 and newer TypeScript.
-
Ensure your tsconfig.json has jsx set to react-jsx for React 17+, or react for older versions.
A jsx setting mismatch causes TypeScript to use the wrong JSX transform, making components appear incompatible.
-
Explicitly type the component return value as JSX.Element.
If the error is on a specific component, add an explicit return type annotation. Example: const MyComponent = (): JSX.Element => { ... } This helps TypeScript verify the return type directly.
-
Delete node_modules and package-lock.json, then run npm install to get clean dependencies.
Conflicting versions of @types/react from nested dependencies cause TS2786. A clean install resolves version conflicts in the dependency tree.
When to Call a Professional
If the error persists after updating @types/react and @types/react-dom to matching versions, check your tsconfig.json jsx setting and confirm it matches your React version.
Frequently Asked Questions
Why did TS2786 suddenly appear after an npm update?
An npm update likely changed the version of @types/react. React 18 changed JSX types in a way that is incompatible with older @types/react. Run: npm install @types/react@18 @types/react-dom@18 to fix it.
Does TS2786 mean my component code is wrong?
Not necessarily — TS2786 is most often a type definition version mismatch, not a bug in your component. If updating @types/react fixes it, your component code was fine all along.