# Fix Type Not Assignable to Type ReactNode Error

> Fix mismatched @types/react versions with yarn dedupe, npm overrides, or the pnpm overrides field in package.json to resolve the ReactNode type error

**URL:** https://sentry.io/answers/type-is-not-assignable-to-type-reactnode/

---

## 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](https://github.com/microsoft/DefinitelyTyped-tools/issues/433). 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:

```bash
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:

```bash
yarn dedupe @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:

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

### NPM v8+

You can use the [`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) directive to explicitly set the version of the `@types/react` package to be used in your `package.json`:

```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`:

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

The overrides directive for `pnpm` as explained in their [documentation](https://pnpm.io/package_json#pnpmoverrides).

---

*Source: [sentry.io/answers/type-is-not-assignable-to-type-reactnode/](https://sentry.io/answers/type-is-not-assignable-to-type-reactnode/)*