Why does AWS-Amplify build fails when Auth feature is added - reactjs

I just recently started using Amazon's AWS basic plan, I am using the AWS-Amplify for uploading react applications and I usually used yarn with create react-app. I am not sure if it has conflicts with the AWS tutorial using npm but I got it right and had success with the building and deployment. However, when I added the Auth functionalities it only worked on my local but the build fails on deployment. This is the error log:
2020-06-23T17:07:34.078Z [INFO]: Git SSH Key acquired
2020-06-23T17:07:34.155Z [INFO]: # Cloning repository: git#github.com:mav1283/amplifyapp.git
2020-06-23T17:07:34.273Z [INFO]: Agent pid 131
2020-06-23T17:07:34.329Z [INFO]: Identity added: /root/.ssh/git_rsa (/root/.ssh/git_rsa)
2020-06-23T17:07:34.558Z [INFO]: Cloning into 'amplifyapp'...
2020-06-23T17:07:35.697Z [INFO]: Warning: Permanently added the RSA host key for IP address '13.229.188.59' to the list of known hosts.
2020-06-23T17:07:38.298Z [INFO]: # Switching to commit: 2d93cd9fca8f302a1390bce33985acccf97a8263
2020-06-23T17:07:38.388Z [INFO]: Note: checking out '2d93cd9fca8f302a1390bce33985acccf97a8263'.
You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.
If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:
git checkout -b <new-branch-name>
HEAD is now at 2d93cd9 add auth
2020-06-23T17:07:38.389Z [INFO]: # Checking for Git submodules at: /codebuild/output/src043707224/src/amplifyapp/.gitmodules
2020-06-23T17:07:38.411Z [INFO]: # Retrieving cache...
2020-06-23T17:07:40.086Z [INFO]: # Extracting cache...
2020-06-23T17:07:43.479Z [INFO]: # Extraction completed
2020-06-23T17:07:43.604Z [INFO]: # Retrieving environment cache...
2020-06-23T17:07:43.642Z [INFO]: # Retrieved environment cache
2020-06-23T17:08:17.476Z [INFO]: ## Starting Frontend Build
# Starting phase: preBuild
# Executing command: yarn install
2020-06-23T17:08:18.203Z [INFO]: yarn install v1.16.0
2020-06-23T17:08:18.305Z [INFO]: [1/4] Resolving packages...
2020-06-23T17:08:18.838Z [INFO]: [2/4] Fetching packages...
2020-06-23T17:08:48.710Z [INFO]: info fsevents#2.1.2: The platform "linux" is incompatible with this module.
2020-06-23T17:08:48.712Z [INFO]: info "fsevents#2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
2020-06-23T17:08:48.719Z [INFO]: info fsevents#1.2.13: The platform "linux" is incompatible with this module.
2020-06-23T17:08:48.723Z [INFO]: info "fsevents#1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents#2.1.3: The platform "linux" is incompatible with this module.
info "fsevents#2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
2020-06-23T17:08:48.728Z [INFO]: [3/4] Linking dependencies...
2020-06-23T17:08:48.732Z [WARNING]: warning "#aws-amplify/ui-react > #aws-amplify/ui-components#0.5.2" has unmet peer dependency "#aws-amplify/auth#^2.1.5".
warning "#aws-amplify/ui-react > #aws-amplify/ui-components#0.5.2" has unmet peer dependency "#aws-amplify/core#^2.2.4".
warning "#aws-amplify/ui-react > #aws-amplify/ui-components#0.5.2" has unmet peer dependency "#aws-amplify/xr#^1.1.5".
warning " > #testing-library/user-event#7.2.1" has unmet peer dependency "#testing-library/dom#>=5".
2020-06-23T17:08:48.734Z [WARNING]: warning "aws-amplify > #aws-amplify/api#3.1.17" has incorrect peer dependency "#aws-amplify/pubsub#^2.1.1".
warning "aws-amplify > #aws-amplify/datastore#2.2.4" has unmet peer dependency "#react-native-community/netinfo#^5.5.0".
warning "aws-amplify > #aws-amplify/api > #aws-amplify/api-graphql#1.1.0" has incorrect peer dependency "#aws-amplify/pubsub#^2.1.1".
2020-06-23T17:08:48.736Z [WARNING]: warning "react-scripts > #typescript-eslint/eslint-plugin > tsutils#3.17.1" has unmet peer dependency "typescript#>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
2020-06-23T17:08:56.100Z [INFO]: [4/4] Building fresh packages...
2020-06-23T17:08:57.025Z [INFO]: Done in 38.83s.
2020-06-23T17:08:57.047Z [INFO]: # Completed phase: preBuild
# Starting phase: build
# Executing command: yarn run build
2020-06-23T17:08:57.210Z [INFO]: yarn run v1.16.0
2020-06-23T17:08:57.237Z [INFO]: $ react-scripts build
2020-06-23T17:08:58.125Z [INFO]: Creating an optimized production build...
2020-06-23T17:08:59.577Z [INFO]: Failed to compile.
2020-06-23T17:08:59.579Z [INFO]: ./src/index.js
Cannot find file './aws-exports' in './src'.
2020-06-23T17:08:59.596Z [WARNING]: error Command failed with exit code 1.
2020-06-23T17:08:59.597Z [INFO]: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2020-06-23T17:08:59.602Z [ERROR]: !!! Build failed
2020-06-23T17:08:59.677Z [ERROR]: !!! Non-Zero Exit Code detected
2020-06-23T17:08:59.677Z [INFO]: # Starting environment caching...
2020-06-23T17:08:59.678Z [INFO]: # Environment caching completed
Terminating logging...

Creating the service role and changing the CLI version worked for me. If you do one and not the other you will not solve the problem. So create the service role and update the CLi version in the advanced settings to latest. That will work like magic.

For security reasons aws-exports.js is added to git ignore by default on amplify projects. This file is generated when you run the amplify push command.
backend:
phases:
# IMPORTANT - Please verify your build commands
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
Make sure you have amplifyPush --simple on your Build Settings -> amplify.yml file so you generate aws-exports on your amplify builds

Related

Deploying react app with craco on aws amplify

I have a blocking issue since days
I tried to deploy this repo on aws amplify and the build fail:
https://github.com/metaplex-foundation/candy-machine-ui
Everything works perfect in local (yarn run dev and yarn run build)
But with amplify:
here the error
2023-01-24T15:12:12.674Z [INFO]: # Executing command: yarn run build
2023-01-24T15:12:12.803Z [INFO]: yarn run v1.22.0
2023-01-24T15:12:12.826Z [INFO]: $ craco build
2023-01-24T15:12:17.161Z [INFO]: Creating an optimized production build...
2023-01-24T15:13:44.769Z [INFO]: Failed to compile.
2023-01-24T15:13:44.771Z [INFO]: Failed to load config "react-app" to extend from.
Referenced from: /codebuild/output/src254071763/src/fake-mint/package.json
2023-01-24T15:13:44.772Z [INFO]:
2023-01-24T15:13:44.847Z [WARNING]: error Command failed with exit code 1.
2023-01-24T15:13:44.848Z [INFO]: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2023-01-24T15:13:44.852Z [ERROR]: !!! Build failed
2023-01-24T15:13:44.853Z [ERROR]: !!! Non-Zero Exit Code detected
2023-01-24T15:13:44.853Z [INFO]: # Starting environment caching...
2023-01-24T15:13:44.853Z [INFO]: # Environment caching completed

AWS Amplify React - Deployment and Authentication No Longer Working

I have a React application that I deployed to AWS Amplify which has been working just fine. I deployed the application in September of this year, and decided to make a minor HTML update yesterday. I tried to re-deploy the application but I am facing two issues: (1) First, I keep getting an error in the deployment process. You can see the end of the log of the error below:
...
...
2022-12-23T12:45:48.274Z [INFO]: npm ERR! code 127
2022-12-23T12:45:48.277Z [INFO]: npm ERR! path
/root/.nvm/versions/node/v16.19.0/lib/node_modules/#aws-amplify/cli/node_modules/babel-runtime/node_modules/core-js
npm ERR! command failed
npm ERR! command sh -c -- node -e "try{require('./postinstall')}catch(e){}"
npm ERR! sh: node: command not found
2022-12-23T12:45:48.277Z [INFO]: npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-12-23T12_42_58_395Z-debug-0.log
2022-12-23T12:45:48.340Z [WARNING]: Process exited with exit code: 127
2022-12-23T12:45:48.340Z [INFO]: ! Error patching NPM package '#aws-amplify/cli' to version 7.6.19
2022-12-23T12:45:48.346Z [INFO]: # Retrieving cache...
2022-12-23T12:45:55.639Z [INFO]: # Extracting cache...
2022-12-23T12:46:05.281Z [INFO]: # Extraction completed
2022-12-23T12:46:05.469Z [INFO]: # Retrieved cache
2022-12-23T12:46:38.486Z [INFO]: ## Starting Backend Build
# Starting phase: build
## Running amplify pull to generate aws-exports.js file for frontend
2022-12-23T12:46:43.354Z [INFO]: [31mInvalid feature flag configuration[39m
2022-12-23T12:46:43.356Z [INFO]: [31mThese feature flags are defined in the "amplify/cli.json" configuration file and are unknown to the currently running Amplify CLI:[39m
[31m - graphqltransformer.showfieldauthnotification[39m
[31mThis issue likely happens when the project has been pushed with a newer version of Amplify CLI, try updating to a newer version.[39m
[31mEnsure that the CI/CD pipeline is not using an older or pinned down version of Amplify CLI.[39m
[31mLearn more about feature flags: https://docs.amplify.aws/cli/reference/feature-flags[39m
2022-12-23T12:46:43.373Z [ERROR]: !!! Build failed
2022-12-23T12:46:43.373Z [ERROR]: !!! Non-Zero Exit Code detected
2022-12-23T12:46:43.373Z [INFO]: # Starting environment caching...
2022-12-23T12:46:43.374Z [INFO]: # Uploading environment cache artifact...
2022-12-23T12:46:43.486Z [INFO]: # Uploaded environment cache artifact
2022-12-23T12:46:43.487Z [INFO]: # Environment caching completed
Terminating logging...
...I tried to (1) delete node_modules, and run npm install again, but that was not successful. I noticed that the most recent aws-amplify/cli is a higher version than the one I am using, but I set the 7.6.19 version in the Build parameters in AWS, so I can't imagine that this is the issue. I upgraded the local cli to the current version, but that did not make a difference either.
The (2) second issue I am facing is that user authentication is no longer working when I run the application locally on my machine. I even reverted back to the commit that was working, and even that is not able to allow users to login. Keep in mind the version in production is just fine (and its the same version as the commit I tried locally).
My question is: What do these errors have in common, and can you suggest a path forward to address this?

Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.css' in '/codebuild/output/src489574561/src/user-management-frontend/src'

I'm trying to deploy a React App in AWS Amplify but during the Build process, AWS Amplify throws below error:
Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.css' in '/codebuild/output/src489574561/src/user-management-frontend/src'
I'm wondering how to solve this error by changing something in code or need to configure AWS Amplify.
Full log trace is here:
# Starting phase: preBuild
# Executing command: npm ci
2022-09-07T06:11:29.303Z [INFO]: > core-js#3.25.0 postinstall /codebuild/output/src489574561/src/user-management-frontend/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
2022-09-07T06:11:29.350Z [INFO]: [96mThank you for using core-js ([94m https://github.com/zloirock/core-js [96m) for polyfilling JavaScript standard library![0m
[96mThe project needs your help! Please consider supporting of core-js:[0m
[96m>[94m https://opencollective.com/core-js [0m
[96m>[94m https://patreon.com/zloirock [0m
[96m>[94m bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz [0m
[96mAlso, the author of core-js ([94m https://github.com/zloirock [96m) is looking for a good job -)[0m
2022-09-07T06:11:29.558Z [INFO]: > core-js-pure#3.25.0 postinstall /codebuild/output/src489574561/src/user-management-frontend/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
2022-09-07T06:11:29.895Z [INFO]: added 1501 packages in 21.092s
2022-09-07T06:11:29.908Z [INFO]: # Completed phase: preBuild
# Starting phase: build
2022-09-07T06:11:29.908Z [INFO]: # Executing command: npm run build
2022-09-07T06:11:30.074Z [INFO]: > user-management-frontend#0.1.0 build /codebuild/output/src489574561/src/user-management-frontend
> react-scripts build
2022-09-07T06:11:31.296Z [INFO]: Creating an optimized production build...
2022-09-07T06:11:31.983Z [INFO]: Failed to compile.
2022-09-07T06:11:31.983Z [INFO]: Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.css' in '/codebuild/output/src489574561/src/user-management-frontend/src'
2022-09-07T06:11:31.994Z [WARNING]: npm
2022-09-07T06:11:31.994Z [WARNING]: ERR! code ELIFECYCLE
npm ERR! errno 1
2022-09-07T06:11:31.996Z [WARNING]: npm
2022-09-07T06:11:31.996Z [WARNING]: ERR! user-management-frontend#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the user-management-frontend#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2022-09-07T06:11:32.000Z [WARNING]:
2022-09-07T06:11:32.000Z [WARNING]: npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-09-07T06_11_31_997Z-debug.log
2022-09-07T06:11:32.000Z [HELP]: Outputting the npm debug log
[object Promise]
2022-09-07T06:11:32.003Z [ERROR]: !!! Build failed
2022-09-07T06:11:32.003Z [ERROR]: !!! Non-Zero Exit Code detected
2022-09-07T06:11:32.003Z [INFO]: # Starting environment caching...
2022-09-07T06:11:32.004Z [INFO]: # Environment caching completed
Terminating logging...
Try installing bootstrap, that's how I solved it.
npm install bootstrap --save

Yarn Install fails due to non existing file

I am deploying a site to netlify.
The site deployed fine until I installed react-player using npm install react-player
There were a number of critical errors that I tried to fix.
The site builds fine locally using yarn run build and it runs fine locally doing npm start.
But when I deploy it to netlify I get an error with Yarn Install that shows the following
5:21:48 AM: Build ready to start
5:21:50 AM: build-image version: 73def8bb10593b9b818f44989a75ea508018ccb7 (focal)
5:21:50 AM: build-image tag: v4.5.2
5:21:50 AM: buildbot version: 8cd320132979d1a1a502e85e77b47b97cc7d659f
5:21:50 AM: Fetching cached dependencies
5:21:50 AM: Starting to download cache of 237.2MB
5:21:52 AM: Finished downloading cache in 2.467525285s
5:21:52 AM: Starting to extract cache
5:22:00 AM: Finished extracting cache in 7.81313843s
5:22:00 AM: Finished fetching cache in 10.326357005s
5:22:00 AM: Starting to prepare the repo for build
5:22:01 AM: Preparing Git Reference refs/heads/main
5:22:02 AM: Parsing package.json dependencies
5:22:03 AM: Starting build script
5:22:03 AM: Installing dependencies
5:22:03 AM: Python version set to 2.7
5:22:03 AM: Started restoring cached node version
5:22:05 AM: Finished restoring cached node version
5:22:05 AM: v16.13.2 is already installed.
5:22:06 AM: Now using node v16.13.2 (npm v8.1.2)
5:22:06 AM: Started restoring cached build plugins
5:22:06 AM: Finished restoring cached build plugins
5:22:06 AM: Attempting ruby version 2.7.2, read from environment
5:22:07 AM: Using ruby version 2.7.2
5:22:07 AM: Using PHP version 8.0
5:22:07 AM: Started restoring cached yarn cache
5:22:12 AM: Finished restoring cached yarn cache
5:22:13 AM: No yarn workspaces detected
5:22:13 AM: Started restoring cached node modules
5:22:13 AM: Finished restoring cached node modules
5:22:13 AM: Installing NPM modules using Yarn version 1.22.10
5:22:14 AM: yarn install v1.22.10
5:22:14 AM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
5:22:14 AM: [1/4] Resolving packages...
5:22:15 AM: warning react-scripts > fsevents#2.1.2: "Please update to latest v2.3 or v2.2"
5:22:15 AM: warning react-scripts > webpack-dev-server > chokidar > fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
5:22:15 AM: warning react-scripts > babel-jest > #jest/transform > jest-haste-map > fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
5:22:15 AM: error Package "chokidar2" refers to a non-existing file '"/opt/build/repo/chokidar2"'.
5:22:15 AM: info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
5:22:15 AM: Error during Yarn install
5:22:15 AM: Build was terminated: Build script returned non-zero exit code: 1
5:22:15 AM: Creating deploy upload records
5:22:15 AM: Failing build: Failed to build site
5:22:15 AM: Failed during stage 'building site': Build script returned non-zero exit code: 1
5:22:15 AM: Finished processing build request in 25.380006101s
I am not sure how to approach solving this error. I have checked a number of similar posts such as npm install fails, yarn install succeeds on netlify deploy but I am not finding a good solution.
Thanks for your help
the issue was in the yarn.lock file. It was referring to chokidar2 which was not working.
I removed the yarn.lock file and my node modules folder.
Then I ran yarn cache clean
then I reran yarn install to reinstall node modules
Then I ran yarn run build
and reuploaded everything to git with the new build

What am i doing wrong?, Am creating react app with, npx create-react-app app_name. but i keep getting thing unusual error

C:\Users\user>npx create-react-app my-app-redux-demo
Creating a new React app in C:\Users\user\my-app-redux-demo.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
core-js#2.6.12 postinstall C:\Users\user\my-app-redux-demo\node_modules\babel-runtime\node_modules\core-js
node -e "try{require('./postinstall')}catch(e){}"
core-js#3.9.0 postinstall C:\Users\user\my-app-redux-demo\node_modules\core-js
node -e "try{require('./postinstall')}catch(e){}"
core-js-pure#3.9.0 postinstall C:\Users\user\my-app-redux-demo\node_modules\core-js-pure
node -e "try{require('./postinstall')}catch(e){}"
ejs#2.7.4 postinstall C:\Users\user\my-app-redux-demo\node_modules\ejs
node ./postinstall.js
cra-template#1.1.2
react-scripts#4.0.2
react-dom#17.0.1
react#17.0.1
added 1903 packages from 722 contributors and audited 1906 packages in 463.186s
127 packages are looking for funding
run npm fund for details
found 0 vulnerabilities
Git repo not initialized Error: Command failed: git --version
at checkExecSyncError (child_process.js:611:11)
at execSync (child_process.js:647:15)
at tryGitInit (C:\Users\user\my-app-redux-demo\node_modules\react-scripts\scripts\init.js:46:5)
at module.exports (C:\Users\user\my-app-redux-demo\node_modules\react-scripts\scripts\init.js:283:7)
at [eval]:3:14
at Script.runInThisContext (vm.js:131:20)
at Object.runInThisContext (vm.js:297:38)
at Object. ([eval]-wrapper:10:26)
at Module._compile (internal/modules/cjs/loader.js:1118:30)
at evalScript (internal/process/execution.js:94:25) {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 6444,
stdout: null,
stderr: null
}
Installing template dependencies using npm...
npm WARN registry Unexpected warning for http://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-zJmm08OqHoWE/tbPBA3EoM3NqC+jSXNrjmFOL793hAbIsvaQb1AGlZwyklCdorV7Smk99/CUEbGMX4WyYp9eOQ== integrity checksum failed when using sha512: wanted sha512-zJmm08OqHoWE/tbPBA3EoM3NqC+jSXNrjmFOL793hAbIsvaQb1AGlZwyklCdorV7Smk99/CUEbGMX4WyYp9eOQ== but got sha512-bT3IYAdf9Eqxmgn6hiWRbSzk6tLXQqI9oMekX8vYrhnaMN7MK7A7uYzVR2dlbf0vqr5HvYW2DOV61NEoGJXTVQ==.
(180727 bytes)
npm WARN registry Using stale data from http://registry.npmjs.org/ due to a request error during revalidation.
npm ERR! code EINTEGRITY
npm ERR! errno EINTEGRITY
npm ERR! Invalid response body while trying to fetch http://registry.npmjs.org/#testing-library%2fuser-event: Integrity verification failed for sha512-zJmm08OqHoWE/tbPBA3EoM3NqC+jSXNrjmFOL793hAbIsvaQb1AGlZwyklCdorV7Smk99/CUEbGMX4WyYp9eOQ== (C:\Users\user\AppData\Roaming\npm-cache_cacache\content-v2\sha512\cc\99\a6d3c3aa1e8584fed6cf040dc4a0cdcda82fa349736b8e614e2fbf778406c8b2f6906f5006959c3292509da2b57b4a693df7f09411b18c5f85b2629f5e39)
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Roaming\npm-cache_logs\2021-02-19T14_10_23_648Z-debug.log
npm install --save #testing-library/jest-dom#^5.11.4 #testing-library/react#^11.1.0 #testing-library/user-event#^12.1.10 web-vitals#^1.0.1 failed
Looks like the directory where you ran CRA doesn't allow initializing a git repo. Could it be read-only?. Try git init in a new directory in the same path and if it fails - troubleshoot that. Once it succeeds, CRA should work too.
Check to ensure that you have correctly installed git by following the installation process outlined on https://git-scm.com/book/en/v2/Getting-Started-Installing-Git.
After installing, you can confirm that git is installed by running git --version (what React is trying to do). Currently, you will likely see an error trying to run this command as git is not installed. Post-install, you should see a version number being displayed.
After installing git, run your create-react-app again.

Resources