Type {} is not assignable to type ReactNode

Shivan M.

The Problem

When using a component provided by a third-party package, you may encounter an error related to React types when trying to use those components. This error will only occur when attempting to build or run your project on a different environment or machine to your development environment.

The error is:

Type '{}' is not assignable to type 'ReactNode'

The top of the stack trace will state:

Type error: 'ThirdPartyComponent` cannot be used as a JSX component.

This error usually occurs because the @types/react package version is incorrect. Many popular libraries (including @types/react-dom) set the version of @types/react to * - the most recent major release. The package resolution in the build step of your project can cause incompatible versions of @types/react to be installed in your project resulting in the error.

The core issue is not with the React typings, but instead with how dependencies are represented in Typescript. The long-term discussion about this problem can be found here. For the moment, we have to rely on workarounds.

The Solution

The solution to this problem will depend on the package manager you use for your project.


With yarn, you have two possible solutions.

  1. Deduplicate the dependencies

You can remove duplicate resolutions of the @types/react package by running the following command:

npx yarn-deduplicate --packages @types/react

This will work as long the projects that depend on @types/react also support the version of React that your project is running.

For Yarn v2, the solution is similar and uses the dedup command:

yarn dedup @types/react
  1. Explicitly set the resolutions in package.json

You can specify strict resolution restrictions for dependencies of your dependencies by adding the following to your package.json file:

"resolutions": { "@types/react": "^18.0.0", }

NPM v8+

You can use the overrides directive to explicitly set the version of the @types/react package to be used in your package.json:

{ "overrides": { "@types/react": "^18.0.0" } }


Similarly to the npm solution above, for pnpm, you can set the version of @types/react to be used in your package.json:

"pnpm": { "overrides": { "@types/react": "^18.0.0" } }

The overrides directive for pnpm as explained in their documentation.

Get Started With Sentry

Get actionable, code-level insights to resolve React performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a React project and note your DSN

  3. Grab the Sentry React SDK

npm install @sentry/react
  1. Configure your DSN
import React from "react"; import ReactDOM from "react-dom"; import * as Sentry from "@sentry/react"; import App from "./App"; Sentry.init({ dsn: "https://<key>@sentry.io/<project>" }); ReactDOM.render(<App />, document.getElementById("root"));

Check our documentation for the latest instructions.

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.