React 19 Support

[florence-wolfe]

Is your feature request related to a problem? Please describe.

• @nivo/core (and possibly other packages) have a strict React dependency range that restricts React 19
  • @nivo/core's package.json
• This prevents applications from upgrading their React versions unless they begin including the --legacy-peer-deps flag or --force for every installation which is not ideal.

Describe the solution you'd like

• Either increase the allowing version range in the packages or add proper support for the version.
  • The React team has written a migration guide that also includes several codemods to make the migration relatively seamless.

[plouc]

Adding support for React 19 might be a lot of work, it's also still unclear, looking at the migration guide, if I could still support older React versions with the same @nivo version.

The 19 still being a RC at the moment, I think it's not really pressing, and I'd probably need to upgrade gatsby, storybook... as well, which seems like a huge project.

Finally, I was migrating tests from enzyme (which has been deprecated) to use the react test renderer, which they're removing apparently, they advise to use @testing-library/react, but the approach of this lib is really not practical to test charts/svg elements.

It will take time to get there and this should be split in sub-projects, I don't have the bandwidth to handle everything at once.

[J4v4Scr1pt]

Will follow this thread, we are a company that are about to replace our current chart solution.
This was our top pick until I saw this thread.

I understand that time estimation is super hard, but do you think this will take years or months after React 19 release?
Because we (among others) use Next.Js and no React 19 support will also block us from upgrading nextjs version in the future.

[o-alexandrov]

React has an issue where they link some libraries and respective PRs how those libraries upgraded to react 19.
It might be a useful read to familiarize with common roadblocks and how other devs resolved those in their projects.

imho, the starting point would be to run various provided by React 19 codemods which should do the heavy lifting:

npx codemod@latest react/19/migration-recipe

[plouc]

@o-alexandrov, thank you for sharing, this could help.

[skip405]

Latest major version of Next.js (version 15) uses React 19 RC, so it's not going to be possible to use Nivo with it

[J4v4Scr1pt]

Latest major version of Next.js (version 15) uses React 19 RC, so it's not going to be possible to use Nivo with it

Man.. this is no good..

[tarjep]

I was upgrading to Next 15 and by effect React 19, and ended up being blocked by this issue as well.

[jonasbuechel]

I'm about to use Nivo but also like to upgrade to Next 15 / React 19 the next few weeks. Is there a work-around for the moment?

[J4v4Scr1pt]

And React 19 is now stable...
https://react.dev/blog/2024/12/05/react-19

[furkanonb]

'ResponsiveBar' cannot be used as a JSX component.
  Its type '<RawDatum extends BarDatum>(props: ResponsiveBarSvgProps<RawDatum>) => Element' is not a valid JSX element type.
    Type '<RawDatum extends BarDatum>(props: ResponsiveBarSvgProps<RawDatum>) => Element' is not assignable to type '(props: any) => ReactNode'.
      Type 'Element' is not assignable to type 'ReactNode'.
        Property 'children' is missing in type 'ReactElement<any, any>' but required in type 'ReactPortal'.

I get a TypeScript error after upgrading React to 19. Is anyone else experiencing the same issue?

[furkanonb]

'ResponsiveBar' cannot be used as a JSX component.
  Its type '<RawDatum extends BarDatum>(props: ResponsiveBarSvgProps<RawDatum>) => Element' is not a valid JSX element type.
    Type '<RawDatum extends BarDatum>(props: ResponsiveBarSvgProps<RawDatum>) => Element' is not assignable to type '(props: any) => ReactNode'.
      Type 'Element' is not assignable to type 'ReactNode'.
        Property 'children' is missing in type 'ReactElement<any, any>' but required in type 'ReactPortal'.

I get a TypeScript error after upgrading React to 19. Is anyone else experiencing the same issue?

I solved my issue by adding it to the global.d.ts file.

import type { JSX as Jsx } from 'react/jsx-runtime';

declare global {
  namespace JSX {
    type ElementClass = Jsx.ElementClass;
    type Element = Jsx.Element;
    type IntrinsicElements = Jsx.IntrinsicElements;
  }
}

The reason is;
A long-time request is to remove the global JSX namespace from our types in favor of React.JSX. This helps prevent pollution of global types which prevents conflicts between different UI libraries that leverage JSX.

https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript

[J4v4Scr1pt]

I have updated my project to NextJS 15 and React 19. Using overrides and all seems to work just fine!
But I only have these Nivo dependencies:

	"@nivo/bar": "0.88.0",
	"@nivo/core": "0.88.0",
	"@nivo/pie": "0.88.0",

"pnpm": {
		"overrides": {
			"@types/react": "19.0.1",
			"@types/react-dom": "19.0.2"
		}
	}

[espetro]

Hey 👋 I'd like to support with enabling React 19 support in the project. How can we track the todos left to reach it?

[tohearen]

I'm also interested in using Nivo with Next 15+ / React 19+. Subscribed to this thread.

[tohearen]

I switched to @visx/[email protected] for now. It has proper support for React 19.

[plouc]

As someone reported it worked with overrides, I could increase the range of allowed version for now.

[nass600]

Are tooltips working for you folks? They do not seem to work for me (default or custom) migrating to react 19, nextjs 15 and nivo 0.88 (coming from 0.87) without throwing any error in Sunburst, Line and CirclePacking

[J4v4Scr1pt]

Are tooltips working for you folks? They do not seem to work for me (default or custom) migrating to react 19, nextjs 15 and nivo 0.88 (coming from 0.87) without throwing any error in Sunburst, Line and CirclePacking

Yes, it works for me, I use custom and regular tooltips. I also use custom layers on the ResponsivePie chart. You can see above the charts I'm using and versions.

[nass600]

Right, I was able to test it in isolated environments and the issue seems to be regarding nextjs 15.

Can’t figure out exactly what is happening though.
Tried to disable SSR in several ways but it just doesn’t render the tooltips and leaves zero warnings or issues behind

[J4v4Scr1pt]

Right, I was able to test it in isolated environments and the issue seems to be regarding nextjs 15.

Can’t figure out exactly what is happening though. Tried to disable SSR in several ways but it just doesn’t render the tooltips and leaves zero warnings or issues behind

Hmm strange.. 🤔.
I only use the charts inside of an client component though. Because they do not work with SSR and NextJs: #2626

Sry I cant help you with this, but I do nothing special or unusual. Just use them as in the docs.

An example:

<ResponsiveBar
			layers={['grid', 'axes', 'bars', 'totals', 'legends', 'annotations', BorderRadius, CustomMarker]}
			data={[chartData]}
			keys={keys}
			indexBy="enpsData"
			margin={{ top: 2, right: 2, bottom: 2, left: 2 }}
			padding={0}
			layout="horizontal"
			valueScale={{ type: 'linear' }}
			indexScale={{ type: 'band', round: true }}
			colors={({ id, data }) => String(data[`${id}Color`])}
			axisTop={null}
			axisRight={null}
			axisBottom={null}
			axisLeft={null}
			enableGridY={false}
			enableLabel={false}
			labelTextColor={{
				from: 'color',
				modifiers: [['darker', 1.6]],
			}}
			legends={[]}
			role="application"
			ariaLabel="eNPS"
			barAriaLabel={(e) => e.id + ': ' + e.formattedValue + ' in eNPS: ' + e.indexValue}
			tooltip={ItemCustomTooltip}
		/>

[aclaghorn]

@nass600 I also have issues with tooltips not rendering. I do have the crosshairs render and follow the mouse cursor, but the tooltips are completely missing.

[aclaghorn]

@nass600 I was able to get tooltips working! I had to simply add the @nivo/tooltip package to my package.json:

"dependencies": {
    "@nivo/core": "^0.88.0",
    "@nivo/line": "^0.88.0",
    "@nivo/tooltip": "^0.88.0",
}