React 18 Support

[benrhere]

Is your feature request related to a problem? Please describe.
I'd like to be able to use nivo with React 18 which was released on 3/29. Today, the nivo dependencies are such that React 18 causes errors like the following when running "npm update":

npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">= 16.14.0 < 18.0.0" from @nivo/core@0.79.0
npm ERR! node_modules/@nivo/core
npm ERR!   @nivo/core@"0.79.0" from the root project
npm ERR!   peer @nivo/core@"0.79.0" from @nivo/bar@0.79.1
npm ERR!   node_modules/@nivo/bar
npm ERR!     @nivo/bar@"0.79.1" from the root project
npm ERR!   1 more (@nivo/tooltip)

Describe the solution you'd like
I think bumping the React dependency should hopefully address this.

Describe alternatives you've considered
Running "npm update --force" seems to circumvent this problem for now.

Additional context
Thanks for all your work on this terrific library!

[sshquack]

Running into this problem too. Current workaround is to use legacy-peer-deps

nivo/package.json

Lines 83 to 87 in f83ad7b

	"resolutions": {
	"@types/react": "^17.0.11",
	"@types/eslint": "7.29.0",
	"react": "17.0.2",
	"react-dom": "17.0.2"

@plouc @wyze Thank you for this amazing library 🙏

[flashgrimmie]

How can I change the crosshair color? I only see it's black. It won't work for the dark mode sites. Thank you

[cameron-martin]

Is there anything preventing this over upgrading the dependency versions?

[singularitypress]

Is there anything preventing this over upgrading the dependency versions?

Probably just some testing first to ensure that there aren't any breaking changes with 18.

[cameron-martin]

At least two of the things that are blocking are:

• This repo needs to fully replace react-motion with react-spring
• react-spring needs to support React 18

[benrhere]

Appears React 18 support has since been added to react-spring: pmndrs/react-spring#1875

Hopefully that gets us a bit closer

[benrhere]

I created https://github.com/plouc/nivo/pull/2008/files to bump peer dependencies, though I'm not sure if more work is needed to achieve React 18 compatibility but hopefully this moves things in the right direction.

[Gerald12344]

Has React 18 support arrived?

[netbizltd]

I just tried --force installing it but then got "Invalid hook call" errors in the browser :(
Very much looking forward to React 18 support 🙏

[aitorres]

I'm also looking forward to React 18 support over here 👍🏻

[Cpt-Falcon]

@netbizltd I tried --froce as well and it works fine. i don't see why there would be invalid hook call errors, that sounds like something unrelated to nivo. I mean react 18 only adds concurrent mode, don't see why there would be any breaking changes unless you're using the new react 18 concurrent features with the charts specifically. React concurrent will only be enabled on branches where concurrent features are being used so theoretically it should be safe as long as your react component with nivo charts doesn't use the new react 18 features. React 18 was designed in mind so you could gradually upgrade your app to be concurrent where possible. That's one of the great things about it. or are people here just really looking forward to using new transitions and concurrency with nivo charts?

[cameron-martin]

Upgrading the whole repo to use React 18 isn't trivial, because storybook needs upgrading to a version that supports React 18. However, this requires replacing the deprecated @storybook/addon-info and @storybook/addon-knobs. Both of these require upgrading to the component story format, which is quite a big change.

However, as a first step, we could upgrade the constraints on the packages, but still use React 17 in the repository for things such as testing.

[politsin]

have the same problem
subscribe

[Cpt-Falcon]

Upgrading the whole repo to use React 18 isn't trivial, because storybook needs upgrading to a version that supports React 18. However, this requires replacing the deprecated @storybook/addon-info and @storybook/addon-knobs. Both of these require upgrading to the component story format, which is quite a big change.

However, as a first step, we could upgrade the constraints on the packages, but still use React 17 in the repository for things such as testing.

How about just creating a react 18 branch where you dump the storybooks? Then at a later time when upgrading becomes more manageable, you can bring addon info and knobs back in. Create a package called like nivo-react18-experimental

[hayyaun]

Is there any update?
I have to use --legacy-peer-deps option on every npm install in my repo.

[luke9216]

@plouc would you be able to create a new release based on the merged changes in #2056

It is already in the master branch, I cannot see why a new release cannot be created from it.

[plouc]

A new release was created with the updated constraints.

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[cameron-martin]

bump

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[cameron-martin]

The stale bot is broken?

[politsin]

bump again?

[jedahan]

Still seeing this issue, please re-open

[tappyy]

Any update here? I'm getting an Invalid Hook call error thrown from @nivo/tooltip/src/Tooltip.tsx:7 when using ResponsivePie with react@18.2.0.

Package versions are:
@nivo/core@0.80.0,
@nivo/pie@0.80.0,
@nivo/pie@0.80.0

[jwj777]

bump

[PerryRylance]

Same here

[onionhammer]

Is this resolved for real now or just marked stale?

[OsmelSynData]

any updates, for react18 support?

[OsmelSynData]

any updates, for react18 support?

I managed to find work around the problem by not upgrading to yarn berry (yarn 2). I don't know if you guys also had the same issue with yarn but react 18 was not a problem for me.

Here are the version Im using if anyone wants to try it out. Also it would be nice to know why yarn seems to be the issue.
"@nivo/core": "0.83.0"
"react": "^18.2.0",
yarn --version => 1.22.19

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[cameron-martin]

Not stale

[benrhere]

I'm now using this library with react 18 with no problems and no need to use "legacy-peer-deps". The original issue seems to be resolved, so I'm closing this.

[benrhere]

To add context, I'm using pie and bar charts. If this issue needs to remain open for other chart types, I can reopen.

[alinealvesvianna]

I updated my project to:

"react": "^18.3.1",
 "react-dom": "^18.3.1",

I'm getting the following error when hovering over the ResponsiveLine graph:

When I click on the error in the console to see where it comes from, it points to an error in the tooltip script:

I'm using the nivo version:

   "@nivo/core": "^0.87.0",
    "@nivo/line": "^0.87.0",
    "@nivo/pie": "^0.87.0",

Can you help me, please?
@benrhere

[sam-glass]

Not working for me either, failing on @nivo/bar@0.79.1