[@mantine/charts] AreaChart not displaying data with Next.js 15

[eugeniudedin]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.14.3

What package has an issue?

@mantine/charts

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

AreaChart not displaying data. If change it to LineChart with same structure and same data, is working perfectly.

NextJS: 15.0.3
Mantine: 7.14.3
Recharts: 2.14.1

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/devbox/mantine-area-chart-issue-y63fj6

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Provide a sandbox with a minimal reproduction.

[eugeniudedin]

Reproduction

https://codesandbox.io/p/devbox/mantine-area-chart-issue-y63fj6

[TheNaubit]

Reproduction

https://codesandbox.io/p/devbox/mantine-area-chart-issue-y63fj6

I am also experiencing this issue and I am trying to find what could be the cause. And after downgrading the Next.js version in that minimal reproduction to Next.js 14.2.20, the AreaChart works so seems related to Next.js 15.

[TheNaubit]

Ok, I got my AreaChart working in Next.js 15 with React 19. I found this answer in the recharts GitHub repo, answering someone that had a similar issue as us: recharts/recharts#4558 (comment)

Basically, recharts seems to not be working 100% fine with React 19 yet, and one dependency of it (react-is) is not updated in Recharts to support React 19.

So they suggested overriding the react-is lib to an alpha version with support to React 19. But I just checked, and the upgraded version is available: https://www.npmjs.com/package/react-is

Also, the Recharts people are going to release an upgraded version soon: recharts/recharts#4558 (comment)

So, this is just a matter of waiting a couple of hours/days and then update recharts in the @mantine/charts package.

But if someone can not wait, I made it work by adding in my package.json an override:

"overrides": {
		"react-is": "^19.0.0"
},

or if you are using pnpm:

"pnpm": {
	"overrides": {
		"react-is": "^19.0.0"
	}
}

[ckifer]

recharts maintainer here. This isn't just recharts. In react 19 react-is versions must match react and react-dom versions exactly in order for the matchers to ever return true. This is the reason overrides must be used (and may still need to be used after the next release). If your lockfile is using React 19, but react-is is still on 16.8 or something else old then they will not work correctly.

We can't actually add react-is as a peerDependency until 3.x because its technically a breaking change.

Now in 3.x we plan to remove react-is entirely so problem solved anyways, but until then there has potential be some issues

[rtivital]

Okay, this issue is not related to Mantine and does cannot be fixed on the library side, follow the instructions above to install the specific react-is version. For yarn, use resolutions field instead of overrides.