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.

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:

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

2. 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"
  }
}

PNPM

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.