search

LottieFiles / lottie-react

lottie web player as a react component
https://lottiefiles.com
MIT License
720 stars 80 forks source link

Support for React 18 #88

Closed YuLingCheng closed 2 years ago

YuLingCheng commented 2 years ago

Overview

Currently the library only supports react "^17.0.2".

Other naive question, do we need a peer dependency on react for this library?

Linked to https://github.com/LottieFiles/lottie-react/issues/77#issuecomment-1103237469

Thanks a lot!

Motivation

What inspired this enhancement? What makes you think this should be included?

Would be great to be able to use this library with the latest supported react version

Labels

samuelOsborne commented 2 years ago

Hi @YuLingCheng, please try out v3.4.5 which changes how the peer deps work, works with react 18 on my end. Cheers

https://www.npmjs.com/package/@lottiefiles/react-lottie-player/v/3.4.5

YuLingCheng commented 2 years ago

Hello @samuelOsborne ! Thanks a lot for the very quick response 😃

I can confirm that I can install v3.4.5 on a react 18 app ✅ , but I have the following warnings when building my app ⚠️ :

WARNING in ./node_modules/@lottiefiles/react-lottie-player/dist/lottie-react.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yulingcheng/Pigment/test-react-18/node_modules/@lottiefiles/react-lottie-player/src/ColorPicker.tsx' file: Error: ENOENT: no such file or directory, open '/Users/yulingcheng/Pigment/test-react-18/node_modules/@lottiefiles/react-lottie-player/src/ColorPicker.tsx'

WARNING in ./node_modules/@lottiefiles/react-lottie-player/dist/lottie-react.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yulingcheng/Pigment/test-react-18/node_modules/@lottiefiles/react-lottie-player/src/Controls.tsx' file: Error: ENOENT: no such file or directory, open '/Users/yulingcheng/Pigment/test-react-18/node_modules/@lottiefiles/react-lottie-player/src/Controls.tsx'

WARNING in ./node_modules/@lottiefiles/react-lottie-player/dist/lottie-react.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yulingcheng/Pigment/test-react-18/node_modules/@lottiefiles/react-lottie-player/src/Player.tsx' file: Error: ENOENT: no such file or directory, open '/Users/yulingcheng/Pigment/test-react-18/node_modules/@lottiefiles/react-lottie-player/src/Player.tsx'

WARNING in ./node_modules/@lottiefiles/react-lottie-player/dist/lottie-react.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yulingcheng/Pigment/test-react-18/node_modules/@lottiefiles/react-lottie-player/src/Popover.tsx' file: Error: ENOENT: no such file or directory, open '/Users/yulingcheng/Pigment/test-react-18/node_modules/@lottiefiles/react-lottie-player/src/Popover.tsx'

WARNING in ./node_modules/@lottiefiles/react-lottie-player/dist/lottie-react.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yulingcheng/Pigment/test-react-18/node_modules/@lottiefiles/react-lottie-player/src/Seeker.tsx' file: Error: ENOENT: no such file or directory, open '/Users/yulingcheng/Pigment/test-react-18/node_modules/@lottiefiles/react-lottie-player/src/Seeker.tsx'
samuelOsborne commented 2 years ago

@YuLingCheng This warning isn't related to the react version, we already have a ticket for it here: https://github.com/LottieFiles/lottie-react/issues/86

I'll post updates for the warning on that ticket, we're working on a fix for it.

If it's ok with you i'm going to close this issue and use the one I linked as this one has been solved!

Cheers

YuLingCheng commented 2 years ago

Yes perfect, thanks a lot!