plouc
React 18 Support
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: [email protected]
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/[email protected]
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/[email protected]
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!
Running into this problem too. Current workaround is to use legacy-peer-deps
https://github.com/plouc/nivo/blob/f83ad7bd26b0df489486771ac9ee28f99fff449f/package.json#L83-L87
@plouc @wyze Thank you for this amazing library 🙏
How can I change the crosshair color? I only see it's black. It won't work for the dark mode sites. Thank you
Is there anything preventing this over upgrading the dependency versions?
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.
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
Appears React 18 support has since been added to react-spring: https://github.com/pmndrs/react-spring/pull/1875
Hopefully that gets us a bit closer
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.
I just tried --force installing it but then got "Invalid hook call" errors in the browser :( Very much looking forward to React 18 support 🙏
@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?
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.
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-infoand@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
Is there any update?
I have to use --legacy-peer-deps option on every npm install in my repo.
@plouc would you be able to create a new release based on the merged changes in https://github.com/plouc/nivo/pull/2056
It is already in the master branch, I cannot see why a new release cannot be created from it.
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!
![stale[bot] avatar](https://avatars.githubusercontent.com/in/1724?v=4 "Published by a pub.dev verified publisher"){kind=small}
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!
Any update here? I'm getting an Invalid Hook call error thrown from @nivo/tooltip/src/Tooltip.tsx:7 when using ResponsivePie with [email protected].
Package versions are:
@nivo/[email protected],
@nivo/[email protected],
@nivo/[email protected]
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
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!