Dependency conflict: react-lottie incompatible with React 18

[Digz0]

Problem

There's a dependency conflict in the project. react-lottie@1.2.3 requires an older version of React (^0.14.7 || ^15.0.0 || ^16.0.0), but the project is using React 18.2.0.

Error Message

PS C:\Users\digal\Documents\GitHub\frontend> npm install   
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: react-lottie@1.2.3
npm error Found: react@18.2.0
npm error node_modules/react
npm error   react@"^18" from the root project
npm error   peerOptional react@"^18.0.0" from framer-motion@10.16.16
npm error   node_modules/framer-motion
npm error     framer-motion@"^10.16.12" from the root project
npm error     peer framer-motion@">=4.0.0" from @chakra-ui/accordion@2.3.1
npm error     node_modules/@chakra-ui/accordion
npm error       @chakra-ui/accordion@"2.3.1" from @chakra-ui/react@2.8.2
npm error       node_modules/@chakra-ui/react
npm error         @chakra-ui/react@"^2.8.2" from the root project
npm error         1 more (@chakra-ui/next-js)
npm error     8 more (@chakra-ui/menu, @chakra-ui/modal, @chakra-ui/popover, ...)
npm error   98 more (next-auth, next-mdx-remote, @mdx-js/react, next, ...)
npm error
npm error Could not resolve dependency:
npm error peer react@"^0.14.7 || ^15.0.0 || ^16.0.0" from react-lottie@1.2.3
npm error node_modules/react-lottie
npm error   react-lottie@"^1.2.3" from the root project
npm error
npm error Conflicting peer dependency: react@16.14.0
npm error node_modules/react
npm error   peer react@"^0.14.7 || ^15.0.0 || ^16.0.0" from react-lottie@1.2.3
npm error   node_modules/react-lottie
npm error     react-lottie@"^1.2.3" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\digal\AppData\Local\npm-cache\_logs\2024-07-07T05_58_18_820Z-eresolve-report.txt

npm error A complete log of this run can be found in: C:\Users\digal\AppData\Local\npm-cache\_logs\2024-07-07T05_58_18_820Z-debug-0.log

Suggested Solution

Consider updating react-lottie to a version compatible with React 18, or replacing it with react-lottie-player which supports newer React versions.

Additional Context

This issue prevents new contributors from setting up the development environment easily and may cause problems in production builds.

[iammasterbrucewayne]

@AayushCodes would you like to take up this issue?