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: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@"18.1.0" from [email protected]
npm ERR! node_modules/react-native
npm ERR! peer react-native@">=0.56" from [email protected]
npm ERR! node_modules/react-native-get-random-values
npm ERR! react-native-get-random-values@"^1.4.0" from @aws-sdk/[email protected]
npm ERR! node_modules/@aws-sdk/middleware-retry
npm ERR! @aws-sdk/middleware-retry@"3.6.1" from @aws-sdk/[email protected]
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/[email protected]
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/[email protected]
npm ERR! node_modules/@aws-amplify/core
npm ERR! @aws-amplify/core@"4.0.2" from @aws-amplify/[email protected]
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 [email protected]
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: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@"^18.0.0" from [email protected]
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.
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