search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.08k stars 1.02k forks source link

Tracking issue for removing `react-motion` dependency #667

Closed Taelkir closed 1 year ago

Taelkir commented 5 years ago

I'm getting the following console warning after upgrading to React 16.9.0

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Motion, TransitionMotion

The above error is what I'm getting in my code, but I have recreated a similar warning in the console here: https://codesandbox.io/s/nivoline-line-layers-461-yogxd?fontsize=14

Only seems to happen to charts with custom tooltips - it doesn't appear for piecharts, but does if I render a choropleth or a line chart

Not sure if Motion/TransitionMotion are dependencies or part of Nivo.

Maintainer Edit: This is due to the react-motion package which is still used for some of the nivo packages, here is the list of packages still need to be migrated to react-spring:

ulysset commented 5 years ago

Hi @Taelkir it's part of react-motion, here's the corresponding issue: https://github.com/chenglou/react-motion/issues/569 Unfortunately, it hasn't been fixed yet.

Justin2997 commented 5 years ago

Maby we should have a fork of the fix in the organization repo, the projet last commit was in 2018.

loganpowell commented 4 years ago

I was just about to submit this same issue. It seems React Motion has been abandoned.

gwillz commented 4 years ago

There's an PR to fix this in react-motion: chenglou/react-motion#534. The initial hesitation was about compatability with React v14/15. But now it sounds like the project is somewhat abandoned.

Other have mentioned successful transitions to react-spring: react-spring/react-spring.

IamPrudhviRam commented 4 years ago

So what's the solution for it? I mean any alternatives or something like that? It's not good to see a warning on console just because its irritating and not acceptable.

mckelveygreg commented 4 years ago

Perhaps if there were some examples of how a move to React-spring would look like for a package, we could do it incrementally? I'd be willing to do a package or 2, but I would like a little help as it seems that React-motion is firmly integrated into Nivo..

alexweber commented 4 years ago

Maybe if there was a bounty on this it would help get things in motion... or should I say in spring? 😄

kaiyoma commented 4 years ago

I stumbled upon this today while beginning to investigate Nivo as a replacement for our current dataviz approach, which is an ad hoc combination of several libraries (data-ui, victory, and react-vis). Our data-ui components are currently spewing warnings about componentWillReceiveProps in the console, so I figured I'd start by using Nivo's Bar component to replace our current bar chart. I finally got the chart working and... the same warning appears in the console. 🤦‍♂️

It's not a great look for Nivo that my first experience is a deprecation warning from a library that is abandoned and hasn't been updated since 2017. Thankfully, the console warning doesn't appear if I disable animations, but still, it's 2020. Time to move to react-spring.

wyze commented 4 years ago

I agree. It is a big change we are planning to make. Up until about a month ago, it was a single person managing the project. Now, I have been given some access to help merge PRs and manage issues. This is the second biggest issue we need to tackle.

First, we are migrating the codebase to TS, which is in progress #821 and #963. After that is complete we will be tackling this.

skipjack commented 3 years ago

Bump. I've seen this warning as recently as yesterday, though I can double check my nivo and react versions later.

aurelticot commented 3 years ago

Ended up on this issue from #1256. Nivo looks nice and I'd like to use it in my project but can't install it because of react-motion not supporting react 17. Even with --force or --legacy-peer-deps flags, the typescripts declarations are all messed up. Looking forward replacing react-motion. Any updates?

wmhartl commented 3 years ago

+1 here, looking to shift but am on React 17. Any update here?

webdevmehdi commented 3 years ago

Bump, i have encountered the same warning , any workaround for the moment ?

wyze commented 3 years ago

No workaround currently.

georgeyaacoub commented 3 years ago

Bump, i have encountered the same warning , any workaround for the moment ?

Facing the same problem with the funnel, couldn't work around it.

daniellittledev commented 3 years ago

Colors would be good to migrate next as Bars is migrated but has a dependency on Colors

plouc commented 3 years ago

@daniellittledev, the problem is that colors is used by non migrated packages relying on some specific features for react-motion, so it'll probably be one of the last to be migrated.

plouc commented 3 years ago

@nivo/scatterplot has been migrated to @react-spring via https://github.com/plouc/nivo/pull/1726.

Nessworthy commented 3 years ago

Is this entirely blocking use of nivo when running React 17.x? Just hit a dep issue with react & react-motion whilst trying to use treemap.

(Snipped CLI output log - can see colors listed above which treemap depends on)

plouc commented 2 years ago

@Nessworthy, you'll still get a warning but it should work.

plouc commented 2 years ago

Migrated @nivo/network to react-spring in https://github.com/plouc/nivo/pull/1767.

plouc commented 2 years ago

Migrated @nivo/chord to react-spring in https://github.com/plouc/nivo/pull/1874

plouc commented 2 years ago

Removed from @nivo/colors in https://github.com/plouc/nivo/pull/1885

MichaelDeBoey commented 2 years ago

1271 will remove it from @nivo/waffle

plouc commented 1 year ago

Removed from @nivo/waffle in https://github.com/plouc/nivo/pull/2320.