Support for React 18

[YuLingCheng]

Overview

Currently the library only supports react "^17.0.2".

• Will the library easily work with react 18?
• If yes, could we allow this version in the peer dependencies?
• If no, is there a plan and ETA to have this library work with react 18?

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

Linked to #77 (comment)

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

• Add the Type: Enhancement label to this issue. ➡️ Unable to add a label sorry

[samuelOsborne]

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]

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]

@YuLingCheng This warning isn't related to the react version, we already have a ticket for it here:
#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]

Yes perfect, thanks a lot!