github action npm run build not working, but works locally - reactjs

Our team created a react web app and want to use github action to push the project to Kuberntes. Here is the Dockerfile:
### STAGE 1: Build ###
FROM node:14.5.0 as build
RUN mkdir -p /src/app
WORKDIR /src/app
# Install app dependencies
COPY package.json /src/app/
RUN npm install && \
npm install -g pushstate-server
# Bundle app source
COPY . /src/app
# Build and optimize react app
RUN npm run build:staging
### STAGE 2: Production Environment ###
FROM nginx:1.19.2
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
when I run docker locally with command
docker build --tag abc:test .
It built the image successfully. But when I push it github action, it will stop at RUN npm run build:staging. And the Error message is
/src/app/src/Components/SideBar/SideBarLinks/index.tsx
TypeScript error in /src/app/src/Components/SideBar/SideBarLinks/index.tsx(124,9):
Property 'children' is missing in type '*** onEntered: () => void; ***' but required in type 'CollapseProps'. TS2741
122 | dropdownWrapperProps=*** 'data-tour': 'support-wrapper' ***
123 | dropdownToggleProps=*** 'data-tour': 'support-dropdown-button' ***
> 124 | collapseProps=***
| ^
125 | onEntered: () => ***
126 | const sidebarItemsWrapper = document.querySelector(
127 | '.side-bar-items-wrapper'
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-09-21T06_19_14_044Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! dashboard_redo#4.0.0 api:staging: `cross-env REACT_APP_API_BASE_URL=https://staging.jetsonai.com/api/v3 npm run integrations-url:staging "npm" "run" "build"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the dashboard_redo#4.0.0 api:staging script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-09-21T06_19_14_076Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! dashboard_redo#4.0.0 build:staging: `cross-env REACT_APP_MODE=test npm run api:staging npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the dashboard_redo#4.0.0 build:staging script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-09-21T06_19_14_093Z-debug.log
The command '/bin/sh -c npm run build:staging' returned a non-zero code: 1
##[error]Process completed with exit code 1.
Any idea?

Related

Error while building react app on gitlab-ci

I am trying to deploy a react app using GitLab-ci when I build on local it works fine but when building on the pipeline I get the error just before the build complete:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! spinspace-admin#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the spinspace-admin#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-05-20T18_07_19_210Z-debug.log
Running after_script
00:01
Uploading artifacts for failed job
00:02
ERROR: Job failed: exit code 1
This is the before_script in my GitLab-ci.yaml
before_script:
- apt-get update
- npm install
- npm run build
- 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
- mkdir -p ~/.ssh
- eval $(ssh-agent -s)
- '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
please I need help...

React build fails everytime with uglify error

I started a project using 'create-react-app' command and when I do npm run command the command is successfully run but when I use npm build command it fails with the following error everytime.
/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run build --scripts-prepend-node-path=auto
> finteen-web#0.1.0 build /home/jayg/Documents/MyCode/Code/Web/finteen-web
> react-scripts build
Creating an optimized production build...
Failed to compile.
static/js/main.626dbb4b.js from UglifyJs
SyntaxError: Unexpected token: name (length) [/home/jayg/~/punycode/punycode.js:55,0]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! finteen-web#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the finteen-web#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/jayg/.npm/_logs/2019-12-13T17_52_13_422Z-debug.log
Process finished with exit code 1
With create-react-app version:0.9.5
Update your create-react-app version following the CHANGELOG.md of create react app

laravel react command run dev not working

C:\wamp64\www\want>npm run dev
> # dev C:\wamp64\www\want
> npm run development
> # development C:\wamp64\www\want
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
The system cannot find the path specified.
events.js:167
throw er; // Unhandled 'error' event
^
Error: spawn node_modules\webpack\bin\webpack.js ENOENT
at notFoundError (C:\Users\coolm\AppData\Roaming\npm\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:6:26)
at verifyENOENT (C:\Users\coolm\AppData\Roaming\npm\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:40:16)
at ChildProcess.cp.emit (C:\Users\coolm\AppData\Roaming\npm\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:27:25)
at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12)
Emitted 'error' event at:
at ChildProcess.cp.emit (C:\Users\coolm\AppData\Roaming\npm\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:30:37)
at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\coolm\AppData\Roaming\npm-cache\_logs\2018-09-18T16_07_49_646Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\coolm\AppData\Roaming\npm-cache\_logs\2018-09-18T16_07_49_686Z-debug.log
C:\wamp64\www\want>
I'm trying to hook up my Laravel application with React. I followed the step of running the command "php artisan preset react" but after I was instructed to run npm install & run dev. I keep getting the following error. Does anyone have a similar problem?
Try doing full reset:
rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install

Deploying react app to github pages

I'm trying to deploy a react.js app to github pages (I'm following this guide https://medium.freecodecamp.com/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089) but I keep getting the following error when I run npm run deploy
ENOENT: no such file or directory, stat '/Users/name/Documents/Web Dev/100 Web Projects/wikipediaviewer/build'
npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "deploy"
npm ERR! node v6.10.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! wikipediaviewer#1.0.0 deploy: `npm run build&&gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the wikipediaviewer#1.0.0 deploy script 'npm run build&&gh-pages -d build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the wikipediaviewer package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build&&gh-pages -d build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs wikipediaviewer
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls wikipediaviewer
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/name/Documents/Web Dev/100 Web Projects/wikipediaviewer/npm-debug.log
Can anyone pls help me figure out what I am doing wrong? If i run npm run build it builds successfully. Also i didn't use create-react-app to build this app, could that be the issue & what would I have to do to fix it.
It seems like you didn't create a build folder after you ran npm run build, so that you should change gh-pages -d path-to-your-build

React TodoMVC turorial react-boilerplate cant get to running

I ran into problem when i want to setup project of react-boilerplate from tutorial:
http://facebook.github.io/flux/docs/todo-list.html#content
When i run npm install it install all modules, but when i use command npm run build as tutorial says i get this kind of error:
C:\Users\Andraz\Desktop\react-boilerplate>npm run build
> todomvc-flux#0.0.3 build C:\Users\Andraz\Desktop\react-boilerplate
> browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js
The system cannot find the path specified.
Error: Cannot find module 'C:\Users\Andraz\Desktop\react-boilerplate' from 'C:\Users\Andraz\Desktop\react-boilerplate'
at C:\Users\Andraz\Desktop\react-boilerplate\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:55:21
at load (C:\Users\Andraz\Desktop\react-boilerplate\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43)
at onex (C:\Users\Andraz\Desktop\react-boilerplate\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31)
at C:\Users\Andraz\Desktop\react-boilerplate\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:22:47
at FSReqWrap.oncomplete (fs.js:95:15)
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v0.12.3
npm ERR! npm v2.9.1
npm ERR! code ELIFECYCLE
npm ERR! todomvc-flux#0.0.3 build: `browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the todomvc-flux#0.0.3 build script 'browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js'.
npm ERR! This is most likely a problem with the todomvc-flux package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js
npm ERR! You can get their info via:
npm ERR! npm owner ls todomvc-flux
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Andraz\Desktop\react-boilerplate\npm-debug.log
I use Win7. What could i be doing wrong?
I encountered this same issue.
You likely copied the package.json from the github repo as the tutorial directs.
If you examine the package.json tasks, you'll see that it references bundle.js and app.js both in the js/ directory.
Create this directory in the root project (same directory as package.json) and non run build will now complete.
The tutorial makes it sound as if it will describe all steps you need to make when starting with react-bootstrap but it does not. It's more of a broad strokes summary.

Resources