Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tracking issue for removing react-motion dependency #667

Closed
12 tasks done
Taelkir opened this issue Aug 12, 2019 · 25 comments · Fixed by #2320 or #2324
Closed
12 tasks done

Tracking issue for removing react-motion dependency #667

Taelkir opened this issue Aug 12, 2019 · 25 comments · Fixed by #2320 or #2324

Comments

@Taelkir
Copy link

Taelkir commented Aug 12, 2019

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
Copy link

ulysset commented Aug 19, 2019

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

@Justin2997
Copy link

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

@loganpowell
Copy link

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

@gwillz
Copy link

gwillz commented Oct 25, 2019

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
Copy link

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
Copy link

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
Copy link

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

@kaiyoma
Copy link

kaiyoma commented Jun 16, 2020

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
Copy link
Contributor

wyze commented Jun 17, 2020

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.

@stale stale bot added the stale label Oct 29, 2020
@wyze wyze removed the stale label Oct 29, 2020
@wyze wyze pinned this issue Oct 29, 2020
Repository owner deleted a comment from stale bot Dec 22, 2020
@stale stale bot added the stale label Mar 25, 2021
@skipjack
Copy link

skipjack commented Mar 25, 2021

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

@stale stale bot removed the stale label Mar 25, 2021
@wyze wyze added the bug label Mar 25, 2021
@aurelticot
Copy link

aurelticot commented May 6, 2021

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
Copy link

wmhartl commented May 17, 2021

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

@wyze wyze changed the title componentWillReceiveProps warning in React 16.9.0 Tracking issue to remove react-motion dependency Jun 9, 2021
@wyze wyze changed the title Tracking issue to remove react-motion dependency Tracking issue for removing react-motion dependency Jun 9, 2021
@wyze wyze added the pinned label Jun 10, 2021
@webdevmehdi
Copy link

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

@wyze
Copy link
Contributor

wyze commented Jun 12, 2021

No workaround currently.

@georgeyaacoub
Copy link

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
Copy link

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

@plouc
Copy link
Owner

plouc commented Aug 15, 2021

@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
Copy link
Owner

plouc commented Aug 28, 2021

@nivo/scatterplot has been migrated to @react-spring via #1726.

Repository owner deleted a comment from stale bot Aug 28, 2021
Repository owner deleted a comment from sousajunior Aug 28, 2021
@Nessworthy
Copy link

Nessworthy commented Sep 7, 2021

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
Copy link
Owner

plouc commented Dec 31, 2021

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

@plouc
Copy link
Owner

plouc commented Dec 31, 2021

Migrated @nivo/network to react-spring in #1767.

@plouc
Copy link
Owner

plouc commented Jan 1, 2022

Migrated @nivo/chord to react-spring in #1874

@plouc
Copy link
Owner

plouc commented Jan 12, 2022

Removed from @nivo/colors in #1885

@MichaelDeBoey
Copy link

#1271 will remove it from @nivo/waffle

@plouc
Copy link
Owner

plouc commented May 7, 2023

Removed from @nivo/waffle in #2320.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.