How to resolve a peer dependency issue caused by AWS Amplify? - reactjs

Question

I am having a problem with my react build, maybe related to AWS amplify, but I’m having trouble pinning it down.
When it started, I was able to run my program locally without a problem. I uploaded it to GitHub and my CI/CD setup with amplify tried to build it. Amplify said it broke during the build. At that point I discovered that I couldn’t run npm update.
I’ve been messing with it a lot and may have messed up the environment further. If anyone has any advice I’d really appreciate it.
The error I originally encountered was something like this:
npm WARN ERESOLVE overriding peer dependency
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-drag-drop-files#2.3.7
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! peer react#"18.1.0" from react-native#0.70.6
npm ERR! node_modules/react-native
npm ERR! peer react-native#">=0.56" from react-native-get-random-values#1.7.0
npm ERR! node_modules/react-native-get-random-values
npm ERR! react-native-get-random-values#"^1.4.0" from #aws-sdk/middleware-retry#3.6.1
npm ERR! node_modules/#aws-sdk/middleware-retry
npm ERR! #aws-sdk/middleware-retry#"3.6.1" from #aws-sdk/client-cognito-identity#3.6.1
npm ERR! node_modules/#aws-sdk/client-cognito-identity
npm ERR! 11 more (#aws-sdk/client-comprehend, ...)
npm ERR! peer react-native#"^0.0.0-0 || 0.60 - 0.71 || 1000.0.0" from #react-native-async-storage/async-storage#1.17.11
npm ERR! node_modules/#react-native-async-storage/async-storage
npm ERR! peer #react-native-async-storage/async-storage#"^1.13.0" from #aws-amplify/core#4.0.2
npm ERR! node_modules/#aws-amplify/core
npm ERR! #aws-amplify/core#"4.0.2" from #aws-amplify/analytics#5.0.0
npm ERR! node_modules/#aws-amplify/analytics
npm ERR! 11 more (#aws-amplify/api-graphql, #aws-amplify/api-rest, ...)
npm ERR! 1 more (amazon-cognito-identity-js)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^18.0.0" from react-drag-drop-files#2.3.7
npm ERR! node_modules/react-drag-drop-files
npm ERR! react-drag-drop-files#"^2.3.7" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#18.2.0
npm ERR! node_modules/react
npm ERR! peer react#"^18.0.0" from react-drag-drop-files#2.3.7
npm ERR! node_modules/react-drag-drop-files
npm ERR! react-drag-drop-files#"^2.3.7" from the root project
Fully uninstalling react-drag-drop-files didn't help either, it just replaced it with another dependency issue;
The suggestions I saw were mostly reinstall after performing npm config set legacy-peer-deps=true. That didn’t seem ideal but I couldn’t find a specific description of how to actually resolve the dependency conflict. I tried uninstalling and reinstalling the relevant modules but that didn’t work.
Finally I did try enabling legacy peer deps and deleting my modules, then reinstalling. That also didn’t work and left me with this error when trying to run locally:
./node_modules/aws-amplify-react/lib-esm/Amplify-UI/Amplify-UI-Components-React.js
Attempted import error: 'a' is not exported from '#aws-amplify/ui' (imported as 'AmplifyUI').
I wasn’t able to resolve that either. So I deleted modules again, ran npm install again, and now I’m back to the original error.

Answer 1

I had the exact same problem, but using --legacy-peer-deps should work. You are probably however running it only locally, and not when the application is being built in Amplify.
Go to your application in AWS Amplify and select Build settings from the sidebar menu. Next just replace
preBuild:
commands:
- npm ci
With:
preBuild:
commands:
- npm ci --legacy-peer-deps
That did the trick for me at least, hope it helps!
Documentation: https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html