plouc
React 19 Support
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 - This prevents applications from upgrading their React versions unless they begin including the
--legacy-peer-depsflag or--forcefor 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.
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.
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.
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
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
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..
I was upgrading to Next 15 and by effect React 19, and ended up being blocked by this issue as well.
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?
And React 19 is now stable... https://react.dev/blog/2024/12/05/react-19
'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?
'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
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"
}
}
Hey đź‘‹ I'd like to support with enabling React 19 support in the project. How can we track the todos left to reach it?
I'm also interested in using Nivo with Next 15+ / React 19+. Subscribed to this thread.
As someone reported it worked with overrides, I could increase the range of allowed version for now.
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
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.
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
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: https://github.com/plouc/nivo/issues/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}
/>
@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.
@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",
}
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?
@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
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.
@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.
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!
Might organizing a bounty/funding be worthwhile, @markedwards? It could be much cheaper than migration for your company and others.
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..
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
