Sentry Answers>React>

Type {} is not assignable to type ReactNode

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:

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

The top of the stack trace will state:

Click to Copy
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.

Yarn

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:

Click to Copy
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:

Click to Copy
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:

Click to Copy
"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:

Click to Copy
{ "overrides": { "@types/react": "^18.0.0" } }

PNPM

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

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

The overrides directive for pnpm as explained in their documentation.

  • Sentry BlogGuide to Error & Exception Handling in React
  • Sentry BlogHow to identify fetch waterfalls in React
  • Syntax.fmReact Server Components
  • Sentry BlogSentry can’t fix React hydration errors, but it can really help you debug them
  • Syntax.fmWhy the jQuery Creator Uses React and Typescript
  • Syntax.fmListen to the Syntax Podcast
  • Sentry BlogReact Native Debugging and Error Tracking During App Development
  • Syntax.fmDiscussion on building native iOS and Android apps with React Native
  • SentryReact Error & Performance Monitoring
  • Sentry BlogFixing memoization-breaking re-renders in React
  • SentryReact Debug Hub
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,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.

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