Support for React 17 #29

ben4d85 · 2021-01-21T12:42:13Z

Describe the bug

Does not appear to work with React 17 for me.

To Reproduce

Steps to reproduce the behavior:

Type npm i lottie-react
Get an error

Expected behavior

Not get an error.

Additional context

Error message in console when trying to install via npm:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: client@0.1.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from lottie-react@2.1.0
npm ERR! node_modules/lottie-react
npm ERR!   lottie-react@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/ben/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ben/.npm/_logs/2021-01-21T12_34_49_912Z-debug.log

The text was updated successfully, but these errors were encountered:

Gamote · 2021-01-21T13:43:26Z

Hi @ben4d85, thank you for reporting this.

I will add support for React v17 within the v3 of this library. Currently I don't have a lot of time but I will publish it soon enough.

ben4d85 · 2021-01-21T13:46:32Z

Hi @Gamote, thank you for your reply!

I am afraid I need a Lottie library I can use with React for a client project due next week. Appreciate that the fix might take you longer, so in the meantime, is there any other library you can recommend?

Gamote · 2021-01-21T13:50:06Z

@ben4d85 I don't know any stable React implementation at the moment. I guess you can try to make it work with the library provided by LottieFiles.

ben4d85 · 2021-01-26T13:56:11Z

If anyone else has the same problem, I ended up just using https://github.com/airbnb/lottie-web directly.

Gamote · 2021-01-26T14:11:51Z

If you want a non-React implementation it is a good idea to use the lottie-web directly. I will let you know when v3 is out.

jackgraves · 2021-03-12T09:56:33Z

Hi @Gamote, we use your package in quite a few of our Apps and it's really handy!
Do you have an update on when React 17 support will be available?

Gamote · 2021-03-14T20:36:19Z

Hi @jackgraves

Thank you for using this library. 💪

This issue is one of my top priorities, but sadly I am a bit busy until the end of March with my job.
Soon after I will publish the v3 which will contain a lot of cool things, including support for React 17, remote .json files, player controls, bug fixes and many more.

jackgraves · 2021-03-15T08:46:01Z

Thanks @Gamote for your response.

That timeframe is completely reasonable - appreciate your time 🥇

The original react-lottie library seems to be abandoned and still uses deprecated React lifecycle methods [1]. These methods will be removed in React 17. Hence, migrate to lottie-react instead, which fixes the issue and is expected to have React 17 support [2]. [1]: chenqingspring/react-lottie#119 [2]: Gamote/lottie-react#29

iqbal125 · 2021-03-25T19:35:41Z

@Gamote Hello thank you for this library. Your package has made life easier for a lot of people.

Would it be possible to just upgrade to React 17 before a v3 upgrade? To be honest React 17 doesnt not introduce many breaking changes, I have looked through your source code and it should just be a quick and straight upgrade.

Would be really cool if you would be open to this, but I would understand if not. Thank you.

iqbal125 · 2021-03-25T19:49:56Z

For anyone else looking for a solution for this, I ended up just doing npm i lottie-react --force.

Its working perfectly for my simple use case because as mentioned React 16.8 => React 17.0 doesnt have many breaking changes.

The original react-lottie library seems to be abandoned and still uses deprecated React lifecycle methods [1]. These methods will be removed in React 17. Hence, migrate to lottie-react instead, which fixes the issue and is expected to have React 17 support [2]. [1]: chenqingspring/react-lottie#119 [2]: Gamote/lottie-react#29

rustom · 2021-04-12T02:47:21Z

Same works for me in the meantime, thanks @iqbal125!

mosusky · 2021-11-17T13:44:34Z

You can try library from LottieFiles https://github.com/LottieFiles/lottie-react - work fine for me (React 17)

heath-freenome · 2021-11-18T00:31:06Z

@Gamote I will +1

@Gamote Hello thank you for this library. Your package has made life easier for a lot of people.

Would it be possible to just upgrade to React 17 before a v3 upgrade? To be honest React 17 doesnt not introduce many breaking changes, I have looked through your source code and it should just be a quick and straight upgrade.

Would be really cool if you would be open to this, but I would understand if not. Thank you.

I will +1 this... Probably would take about 30 minutes of work... Especially since there hasn't been any obvious activity around v3...

Gamote · 2021-11-30T10:41:29Z

Hey @heath-freenome I know a lot of people requested a fix for this and I am trying a lot to find some time to work on the v3, but it's a bit complicated at the moment with my current job.

From outside it might look just as 30 min. but there are other implications than just changing some code lines. I always encourage people to contribute if they really really need a fix/feature.

For example, thanks to @musayann we will soon have support for React v17. (#41)

heath-freenome · 2021-11-30T17:43:04Z

@musayann @Gamote Yay for the work on getting React 17 in! Good job. And Gamote, I understand your situation. I apologize if I made it seem trivial, it seems, from looking at #41 that it was more work than just updating the React version. Thanks for your hard work.

SpeedOfSpin · 2022-01-07T19:03:04Z

npm install --legacy-peer-deps will also work. Earlier versions of NPM treated invalid peer dependencies as a warning instead of an error. The -force switch forces everything to redownload again so I think using the legacy switch might be a better approach until we get the upgrade.

BierDav · 2022-01-16T09:40:31Z

Still get the same error. Why is that?

Gamote · 2022-01-16T17:38:10Z

Hey guys (@ben4d85 @jackgraves @iqbal125 @rustom @mosusky @heath-freenome @SpeedOfSpin @BierDav)

This issue is solved in the new v2.2.0 version. Sorry for the long waiting time.

BluePanda-io · 2022-03-10T23:05:35Z

Sorry guys but I don't understand how to use this? I still have the same problem

How do I use V2.2.0 during the installation and bypass this problem?

BierDav · 2022-03-14T16:52:43Z

Maybe take a look at the usage docs of packagemanager (npm, yarn)

Durgarao-Workathon · 2022-03-29T08:57:25Z

install with yarn add react-lottie

Gamote · 2022-03-31T07:26:38Z

Sorry guys but I don't understand how to use this? I still have the same problem

How do I use V2.2.0 during the installation and bypass this problem?

Hey @milts10, please share a screenshot with your error and the the exact command that you're using to install it. Also, do you already have an older version of lottie-react installed? If yes, which one?

install with yarn add react-lottie

@Durgarao-Workathon that command will install a different library, if you still want to use this library, you will have to use:

yarn add lottie-react
# or
npm i lottie-react

Gamote self-assigned this Jan 21, 2021

Gamote added bug Something isn't working enhancement New feature or request labels Jan 21, 2021

MohammadAzimi mentioned this issue Mar 9, 2021

Cannot install with React 17 chenqingspring/react-lottie#125

Open

This was referenced Mar 24, 2021

react-lottie is abandoned and uses deprecated lifecycle methods opengovsg/postmangovsg#1083

Closed

chore(lottie): migrate to lottie-react library opengovsg/postmangovsg#1084

Merged

Gamote mentioned this issue Jan 9, 2022

Add support for react 17 #41

Merged

Gamote closed this as completed Jan 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for React 17 #29

Support for React 17 #29

ben4d85 commented Jan 21, 2021

Gamote commented Jan 21, 2021

ben4d85 commented Jan 21, 2021

Gamote commented Jan 21, 2021

ben4d85 commented Jan 26, 2021 •

edited

Loading

Gamote commented Jan 26, 2021

jackgraves commented Mar 12, 2021

Gamote commented Mar 14, 2021 •

edited

Loading

jackgraves commented Mar 15, 2021

iqbal125 commented Mar 25, 2021

iqbal125 commented Mar 25, 2021

rustom commented Apr 12, 2021

mosusky commented Nov 17, 2021

heath-freenome commented Nov 18, 2021 •

edited

Loading

Gamote commented Nov 30, 2021

heath-freenome commented Nov 30, 2021

SpeedOfSpin commented Jan 7, 2022

BierDav commented Jan 16, 2022

Gamote commented Jan 16, 2022

BluePanda-io commented Mar 10, 2022

BierDav commented Mar 14, 2022 •

edited

Loading

Durgarao-Workathon commented Mar 29, 2022

Gamote commented Mar 31, 2022

Support for React 17 #29

Support for React 17 #29

Comments

ben4d85 commented Jan 21, 2021

Gamote commented Jan 21, 2021

ben4d85 commented Jan 21, 2021

Gamote commented Jan 21, 2021

ben4d85 commented Jan 26, 2021 • edited Loading

Gamote commented Jan 26, 2021

jackgraves commented Mar 12, 2021

Gamote commented Mar 14, 2021 • edited Loading

jackgraves commented Mar 15, 2021

iqbal125 commented Mar 25, 2021

iqbal125 commented Mar 25, 2021

rustom commented Apr 12, 2021

mosusky commented Nov 17, 2021

heath-freenome commented Nov 18, 2021 • edited Loading

Gamote commented Nov 30, 2021

heath-freenome commented Nov 30, 2021

SpeedOfSpin commented Jan 7, 2022

BierDav commented Jan 16, 2022

Gamote commented Jan 16, 2022

BluePanda-io commented Mar 10, 2022

BierDav commented Mar 14, 2022 • edited Loading

Durgarao-Workathon commented Mar 29, 2022

Gamote commented Mar 31, 2022

ben4d85 commented Jan 26, 2021 •

edited

Loading

Gamote commented Mar 14, 2021 •

edited

Loading

heath-freenome commented Nov 18, 2021 •

edited

Loading

BierDav commented Mar 14, 2022 •

edited

Loading