Git commit error occurs when executing create react-app command - reactjs

I installed yarn, node, and git to the latest version and ran the yarn create react-app command within the path where the directory to create the project resides. However, near the end of the installation, a git commit error occurred.
I searched for the error and took action by referring to similar information, but the same error occurred.
The name and email were registered as global using the git config command.
yarn, node, git version:
yarn: 3.3.1
node: 18.12.0
git: 2.38.1
The following is a description of the error:
Git commit not created Error: Command failed: git add -A
at checkExecSyncError (node:child_process:871:11)
at execSync (node:child_process:943:15)
at tryGitCommit (D:\reactproject\start\.yarn\__virtual__\react-scripts-virtual-ffe325fc0b\0\cache\react-scripts-npm-5.0.1-d06bd2d5ad-92afa2f245.zip\node_modules\react-scripts\scripts\init.js:61:5)
at module.exports (D:\reactproject\start\.yarn\__virtual__\react-scripts-virtual-ffe325fc0b\0\cache\react-scripts-npm-5.0.1-d06bd2d5ad-92afa2f245.zip\node_modules\react-scripts\scripts\init.js:350:25)
at [eval]:3:14
at Script.runInThisContext (node:vm:129:12)
at Object.runInThisContext (node:vm:313:38)
at node:internal/process/execution:79:19
at [eval]-wrapper:6:22 {
status: 128,
signal: null,
output: [ null, null, null ],
pid: 15184,
stdout: null,
stderr: null
}
Removing .git directory...
Success! Created start at D:\reactproject\start
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd start
yarn start
Happy hacking!

Related

Exit Code 1 when installing react-email-editor

My deployment was working perfectly fine but today for some reason whenever I try to install dependency it then gives me an error
error C:\react\infaque\node_modules\react-email-editor: Command failed.
Exit code: 1
Command: cd demo && npm install
Arguments:
Directory: C:\react\infaque\node_modules\react-email-editor
Output:
The system cannot find the path specified.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
I tried uninstalling node_modules, lock files, changed yarn version, tried different operating systems and tried installing dependencies in node_modules -> react-email-editor folder. But nothing is working.

How do I fix this error given by yarn serve -s build

I'm using GitHub actions to run my cypress tests automatically on every commit. This is the part of code in my yml file which was working earlier:
with:
browser: chrome
build: yarn run build
start: yarn start
wait-on: 'http://localhost:3000'
Then to use serve I made changes in 2 lines:
with:
browser: chrome
run: yarn global add serve //added this line
build: yarn run build
start: yarn serve -s build //changed this line
wait-on: 'http://localhost:3000'
Now instead of running the test, it shows this error:
Warning: Unexpected input(s) 'run', valid inputs are ['record', 'config', 'config-file', 'env', 'browser', 'command', 'start', 'start-windows', 'build', 'install', 'install-command', 'runTests', 'wait-on', 'wait-on-timeout', 'parallel', 'group', 'tag', 'working-directory', 'headed', 'spec', 'project', 'command-prefix', 'ci-build-id', 'cache-key', 'quiet', 'component']
&
Error: Unable to locate executable file: serve. Please verify either the file path exists or the file can be found within a directory specified by the PATH environment variable. Also check the file mode to verify the file is executable.
So how do I fix this?
Also if I use start: npx serve -s build instead of yarn serve -s build, it works but it is a yarn project and I think I'm not suppose to use npm and npx in yarn projects, right? Or can I?
with:
browser: chrome
build: yarn run build
start: yarn serve
wait-on: 'http://localhost:3000'
in package.json
{
"scripts": {
"serve": "serve -s build"
}
}

Deploy React app with gh-pages after moving local folder

I'm having trouble deploying my React app with gh-pages since I moved my local directory from the main disk to a secondary disk on my laptop (I was running out of space).
Directory: https://github.com/jorislimonier/jorislimonier.github.io/
Here is the output of npm run deploy:
joris#joris-N751JK:/media/joris/projects/personal-website$ npm run deploy
> joris.limonier.github.io#0.1.0 predeploy
> npm run build
> joris.limonier.github.io#0.1.0 build
> react-scripts build
Creating an optimized production build...
warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration
Compiled successfully.
File sizes after gzip:
75.73 kB build/static/js/main.27c91ea0.js
12.63 kB build/static/css/main.5cfc2ee1.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
> joris.limonier.github.io#0.1.0 deploy
> gh-pages -d build
Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).
I tried:
git remote remove origin
git remote add origin https://github.com/jorislimonier/jorislimonier.github.io.git
Any idea?

Running react-snap on AWS codebuild

I have a react website that I host on AWS. I have created code pipeline in AWS that connects to my github, which automatically builds the projects using codeBuild and deploys it to S3.
I'm trying to add react-snap to the project. It works well locally but when I try to build it in codebuild I get this error
Error: Failed to launch chrome!
/codebuild/output/src159566889/src/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory
TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
at onClose (/codebuild/output/src159566889/src/node_modules/puppeteer/lib/Launcher.js:348:14)
at Interface.<anonymous> (/codebuild/output/src159566889/src/node_modules/puppeteer/lib/Launcher.js:337:50)
at Interface.emit (events.js:326:22)
at Interface.close (readline.js:416:8)
at Socket.onend (readline.js:194:10)
at Socket.emit (events.js:326:22)
at endReadableNT (_stream_readable.js:1241:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
error Command failed with exit code 1.
I have tried to google it but I didn't find anything specific to codebuild and react-snap. I have found similar questions in regards to running chrome on codebuild but they related to different environments like angular and so I wasn't able to copy their solutions.
This is what my current buildspec.yaml file looks like
version: 0.2
env:
variables:
S3_BUCKET: "xyz"
STAGE: "beta"
phases:
install:
commands:
- yarn install
build:
commands:
- echo "Building for $STAGE"
- yarn build
- sam package --template-file cloudformation/Root.json --s3-bucket ${S3_BUCKET} --s3-prefix WebsiteCF/${CODEBUILD_RESOLVED_SOURCE_VERSION} --output-template-file build/packaged-template.yaml
artifacts:
files:
- '**/*'
base-directory: 'build'
Based on the instruction on the link provided by the error, I tried adding this but it didn't work
install:
commands:
- PYTHON=python2 amazon-linux-extras install epel -y
- yum install -y chromium
- yarn install
I managed to get it working using these steps:
Make sure your AWS code builder is using aws/codebuild/standard:5.0
Go t AWS code builder -> Edit -> Environment -> Override image
Create a addArgs.sh file to your project with this content
# modifies react-snap defaultOptions to add the --no-sandbox and --disable-setuid-sandbox flags so that puppeteer/chromium can run in the codebuild standard image
sed -i "s/puppeteerArgs: \[\],/puppeteerArgs: \[\"--no-sandbox\", \"--disable-setuid-sandbox\"\],/" ./node_modules/react-snap/index.js
echo changed arguments in react-snap
To your buildspec.yml file, add these lines to the install stage
# Install chrome headless
- apt-get -y update
- apt-get --assume-yes install chromium-browser
- sh ./addArgs.sh # run custom script to change options on react-snap to make it work
I found the answer from here - https://github.com/stereobooster/react-snap/issues/122

Deploy React JS SPA in Openshift

I have build a React JS app and triggered yarn build command. Its builded successfully and if I run yarn global add serve, its working perfectly on http://localhost:5000. After that I tried below link to deploy this code to OpenShift.
OpenShift Deployment
According to the document, I tried to run npx nodeshift --strictSSL=false --dockerImage=bucharestgold/centos7-s2i-web-app --imageTag=10.13.0 --build.env YARN_ENABLED=true --expose
Then I got this log -
npx: installed 216 in 37.284s
kubernetes-client deprecated require('kubernetes-client').config, use require('kubernetes-client/backends/request').config. ..\..\Users\RITUPARNABHATTACHARY\AppData\Roaming\npm-cache\_npx\11068\node_modules\nodeshift\node_modules\openshift-rest-client\lib\openshift-rest-client.js:25:35
kubernetes-client deprecated require('kubernetes-client').config, use require('kubernetes-client/backends/request').config. ..\..\Users\RITUPARNABHATTACHARY\AppData\Roaming\npm-cache\_npx\11068\node_modules\nodeshift\node_modules\openshift-rest-client\index.js:23:39
2019-12-21T11:58:07.841Z INFO loading configuration
kubernetes-client deprecated fromKubeconfig see https://github.com/godaddy/kubernetes-client/blob/master/merging-with-kubernetes.md#request-kubeconfig- ..\..\Users\RITUPARNABHATTACHARY\AppData\Roaming\npm-cache\_npx\11068\node_modules\nodeshift\lib\nodeshift-config.js:35:32
2019-12-21T11:58:07.882Z INFO using namespace smart-learner at https://c101-e.jp-tok.containers.cloud.ibm.com:30512
kubernetes-client deprecated Client({ config }), see https://github.com/godaddy/kubernetes-client/blob/master/merging-with-kubernetes.md ..\..\Users\RITUPARNABHATTACHARY\AppData\Roaming\npm-cache\_npx\11068\node_modules\nodeshift\node_modules\openshift-rest-client\lib\openshift-rest-client.js:95:18
kubernetes-client deprecated Request() without a .kubeconfig option, see https://github.com/godaddy/kubernetes-client/blob/master/merging-with-kubernetes.md ..\..\Users\RITUPARNABHATTACHARY\AppData\Roaming\npm-cache\_npx\11068\node_modules\nodeshift\node_modules\kubernetes-client\lib\swagger-client.js:200:19
2019-12-21T11:58:07.928Z WARNING a file property was not found in your package.json, archiving the current directory.
2019-12-21T11:58:07.929Z INFO creating archive of .gitignore, build, Dockerfile, package-lock.json, package.json, public, README.md, src, yarn.lock
2019-12-21T11:58:09.001Z INFO using existing build configuration smartlearner-s2i
2019-12-21T11:58:09.377Z INFO using existing image stream smartlearner
2019-12-21T11:58:09.378Z INFO uploading binary archive C:\ReactAPP\smartlearner/tmp/nodeshift/build/archive.tar
2019-12-21T11:58:15.825Z INFO binary upload complete
2019-12-21T11:58:15.828Z INFO waiting for build to finish
kubernetes-client deprecated .getStream use .getByteStream, see https://github.com/godaddy/kubernetes-client/blob/master/merging-with-kubernetes.md ..\..\Users\RITUPARNABHATTACHARY\AppData\Roaming\npm-cache\_npx\11068\node_modules\nodeshift\lib\build-watcher.js:56:107
2019-12-21T11:58:19.798Z TRACE Using bucharestgold/centos7-s2i-web-app:10.x as the s2i builder image
2019-12-21T11:58:20.550Z TRACE ls: cannot access /tmp/src/node_modules: No such file or directory
2019-12-21T11:58:20.564Z TRACE ---> Installing application source
2019-12-21T11:58:20.585Z TRACE ---> Building your Web Application from source
2019-12-21T11:58:20.592Z TRACE Current git config
2019-12-21T11:58:20.620Z TRACE url.https://github.com.insteadof=git#github.com:
2019-12-21T11:58:20.629Z TRACE url.https://.insteadof=ssh://
2019-12-21T11:58:20.629Z TRACE url.https://github.com.insteadof=ssh://git#github.com
2019-12-21T11:58:20.630Z TRACE ---> Using 'yarn install' with YARN_ARGS
2019-12-21T11:58:21.356Z TRACE yarn install v1.10.1
2019-12-21T11:58:21.594Z TRACE 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.
2019-12-21T11:58:21.657Z TRACE [1/4] Resolving packages...
2019-12-21T11:58:23.111Z TRACE [2/4] Fetching packages...
2019-12-21T11:58:53.081Z TRACE error #typescript-eslint/eslint-plugin#2.10.0: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "10.12.0"
2019-12-21T11:58:53.083Z TRACE error Found incompatible module
2019-12-21T11:58:53.086Z TRACE info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
2019-12-21T11:58:58.441Z TRACE error: build error: non-zero (13) exit code from bucharestgold/centos7-s2i-web-app:10.x
2019-12-21T11:59:00.497Z ERROR build failed with message: Assemble script failed.
2019-12-21T11:59:00.503Z ERROR Assemble script failed.
i am not able to understand what I am missing here. I found that bucharestgold/centos7-s2i-web-app has been depreicated and tried with npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --build.env YARN_ENABLED=true --deploy.env NPM_RUN="npx yarn start" --deploy.port=3000 --expose. This is also throwing same error message.
You can use the new web-app flag feature and let nodeshift set the appropriate docker image.
Try running this command instead npx nodeshift --web-app --build.env YARN_ENABLED=true --deploy.env NPM_RUN="npx yarn start" --deploy.port=3000

Resources