How to Fix Recharts Displaying an Empty Chart with React 19

I was upgrading a project to React 19 and noticed in the Chromatic report that some charts were not rendering properly. Not all of them, but some.

After investigating, I found out that the Recharts library doesn't work with React 19 yet, at least not out of the box. There's a very important issue on their GitHub where the author explains to everyone how to set it up https://github.com/recharts/recharts/issues/4558 - feel free to read it.

I still wanted to make a blog post because you have to get through many messages to find the solution, especially if you're using PNPM.

First, ensure you have the latest versions of React, ReactDOM and Recharts. At the time of writing this article, they are:

"react": "19.0.0",
"react-dom": "19.0.0",
"recharts": "2.15.1",

Then, install react-is with the same version as React:

npm install react-is@19.0.0

But wait, what is react-is? It's a library with 112 million downloads per week that provides a set of utility functions for checking whether a value is a particular React element type. It's being used internally by React, and we need to install it to override the version.

Now, the last step is to add "overrides" to your package.json, but... the PNPM version of it:

  "pnpm": {
    "overrides": {
      "react-is": "$react-is"
    }
  }

It must be inside the "pnpm" key; otherwise, it won't work. Note that the overrides field can only be set at the root of the project. You can read more about this in the pnpm documentation.

In the end, you should end up with something like this:

{
  "dependencies": {
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "recharts": "2.15.1",
    "react-is": "19.0.0"
  },
  "pnpm": {
    "overrides": {
      "react-is": "$react-is"
    }
  }
}