React 19 Support #2618

florence-wolfe · 2024-07-01T13:36:36Z

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.

The text was updated successfully, but these errors were encountered:

plouc · 2024-07-02T01:01:54Z

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 · 2024-07-03T13:17:26Z

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 · 2024-07-08T16:53:09Z

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 · 2024-07-09T01:01:31Z

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

skip405 · 2024-10-27T08:40:42Z

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 · 2024-10-27T08:58:08Z

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 · 2024-11-01T21:20:55Z

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

jonasbuechel · 2024-11-06T11:49:39Z

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 · 2024-12-06T13:32:06Z

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

furkanonb · 2024-12-10T08:51:20Z

'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 · 2024-12-12T11:49:46Z

'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 · 2024-12-13T15:33:13Z

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 · 2024-12-26T10:39:21Z

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 · 2024-12-31T14:56:07Z

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

tohearen · 2025-01-06T04:42:57Z

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

plouc · 2025-01-07T01:55:07Z

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

nass600 · 2025-01-07T17:04:45Z

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 · 2025-01-07T18:15:55Z

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 · 2025-01-08T19:45:33Z

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 · 2025-01-08T20:05:59Z

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 · 2025-01-14T19:47:37Z

@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 · 2025-01-16T19:50:55Z

@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",
}

musetraine · 2025-01-20T14:25:00Z

maybe someone can share a plan for update it to react 19v, right now I have peer react@">= 16.14.0 < 19.0.0" from @nivo/[email protected] and what to do next?

JoseDRojasA · 2025-01-21T02:41:46Z

@nivo/heatmap has also the same issue 🤔

jose@MacBook project% npm i @nivo/heatmap
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@">= 16.14.0 < 19.0.0" from @nivo/[email protected]
npm error node_modules/@nivo/heatmap
npm error   @nivo/heatmap@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/jose/.npm/_logs/2025-01-21T02_38_33_653Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/jose/.npm/_logs/2025-01-21T02_38_33_653Z-debug-0.log

fstivicic · 2025-02-11T15:31:09Z

We were very excited to use Nivo in our project. It looks great.
But we choose not to after discovering that it falls on back of one person.
@plouc is there specific reason that this is the case? I see there is a lot of will for support for Nivo, like @espetro for this ticket.

plouc · 2025-02-11T16:06:29Z

@fstivicic, in the past, one person significantly contributed to the project but eventually had to step away due to other obligations and interests. Since then, finding help has been quite challenging.

I’d love to get more contributors, but over the past few years, I've been busy with work and personal commitments, making it difficult to properly maintain the library.

One of the biggest hurdles is timing—when people offer to help, they often need clear guidance on how to tackle specific features or projects, which is completely understandable. However, I rarely have the bandwidth to provide timely direction.

Ideally, I need help from someone already familiar with the codebase and infrastructure—someone who could assist with triaging issues, planning, and overall project management.

There are still open questions about supporting React 19. Can we maintain a single codebase across multiple React versions? Which tools (Storybook, testing frameworks, Gatsby, etc.) need upgrades? How should we test different versions effectively?

Lastly, the project once received small donations via Open Collective, which served as a bit of extra motivation for potential maintainers. However, contributions have nearly stopped, making it even harder to attract help.

markedwards · 2025-02-20T18:15:25Z

Fully understand your plight @plouc, but this is becoming a serious issue. We cannot be stuck on React 18/Next 14, and our product extensively uses Nivo right now.

If there is not likely to be movement on this in the next several months, it would be good to know that so we can migrate away. We would really like to stay with Nivo though.

Is there any chance there will be movement on this front?

Thanks!

tjg · 2025-02-21T09:36:09Z

Might organizing a bounty/funding be worthwhile, @markedwards? It could be much cheaper than migration for your company and others.

shridey · 2025-03-07T05:49:13Z

You guys are amazing yr .. I feel grateful to witness such a sweet community of developers discussing on a particular issue... I'm genuinely thankful for this... Coming to the issue, I've recently migrated our company's product from CRA to Vite, and while doing that, I upgraded all the dependencies to their latest versions, except for React because Nivo doesn't support its latest version... So this issue is relevant to me as well... Currently, we're using React v18.2.0... Hoping to have the support for v19... It would really be great..

nohira · 2025-03-12T13:05:19Z

Hi, I'm using nextjs 15 and react 19 and I'm overriding with --legacy-peer-deps and it seems to work pretty well. I'm using core, line, stream, radial-bar, radar and I had no issues so far

stefanroeck mentioned this issue Dec 7, 2024

Feature/update libs stefanroeck/maven-performance-analyzer#4

Merged

Linschlager mentioned this issue Dec 13, 2024

React 19 support #2678

Closed

marijnkampf mentioned this issue Jan 27, 2025

Bump react-dom from 18.3.1 to 19.0.0 uktrade/data-hub-frontend#7495

Open

anupcowkur mentioned this issue Mar 11, 2025

Upgrade to NextJs 15 & React 19 measure-sh/measure#1852

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React 19 Support #2618

React 19 Support #2618

florence-wolfe commented Jul 1, 2024

plouc commented Jul 2, 2024

J4v4Scr1pt commented Jul 3, 2024 •

edited

Loading

o-alexandrov commented Jul 8, 2024 •

edited

Loading

plouc commented Jul 9, 2024

skip405 commented Oct 27, 2024

J4v4Scr1pt commented Oct 27, 2024

tarjep commented Nov 1, 2024

jonasbuechel commented Nov 6, 2024

J4v4Scr1pt commented Dec 6, 2024

furkanonb commented Dec 10, 2024

furkanonb commented Dec 12, 2024

J4v4Scr1pt commented Dec 13, 2024

espetro commented Dec 26, 2024

tohearen commented Dec 31, 2024

tohearen commented Jan 6, 2025

plouc commented Jan 7, 2025

nass600 commented Jan 7, 2025 •

edited

Loading

J4v4Scr1pt commented Jan 7, 2025

nass600 commented Jan 8, 2025

J4v4Scr1pt commented Jan 8, 2025 •

edited

Loading

aclaghorn commented Jan 14, 2025

aclaghorn commented Jan 16, 2025

musetraine commented Jan 20, 2025

JoseDRojasA commented Jan 21, 2025

fstivicic commented Feb 11, 2025

plouc commented Feb 11, 2025

markedwards commented Feb 20, 2025

tjg commented Feb 21, 2025

shridey commented Mar 7, 2025

nohira commented Mar 12, 2025

React 19 Support #2618

React 19 Support #2618

Comments

florence-wolfe commented Jul 1, 2024

plouc commented Jul 2, 2024

J4v4Scr1pt commented Jul 3, 2024 • edited Loading

o-alexandrov commented Jul 8, 2024 • edited Loading

plouc commented Jul 9, 2024

skip405 commented Oct 27, 2024

J4v4Scr1pt commented Oct 27, 2024

tarjep commented Nov 1, 2024

jonasbuechel commented Nov 6, 2024

J4v4Scr1pt commented Dec 6, 2024

furkanonb commented Dec 10, 2024

furkanonb commented Dec 12, 2024

J4v4Scr1pt commented Dec 13, 2024

espetro commented Dec 26, 2024

tohearen commented Dec 31, 2024

tohearen commented Jan 6, 2025

plouc commented Jan 7, 2025

nass600 commented Jan 7, 2025 • edited Loading

J4v4Scr1pt commented Jan 7, 2025

nass600 commented Jan 8, 2025

J4v4Scr1pt commented Jan 8, 2025 • edited Loading

aclaghorn commented Jan 14, 2025

aclaghorn commented Jan 16, 2025

musetraine commented Jan 20, 2025

JoseDRojasA commented Jan 21, 2025

fstivicic commented Feb 11, 2025

plouc commented Feb 11, 2025

markedwards commented Feb 20, 2025

tjg commented Feb 21, 2025

shridey commented Mar 7, 2025

nohira commented Mar 12, 2025

J4v4Scr1pt commented Jul 3, 2024 •

edited

Loading

o-alexandrov commented Jul 8, 2024 •

edited

Loading

nass600 commented Jan 7, 2025 •

edited

Loading

J4v4Scr1pt commented Jan 8, 2025 •

edited

Loading