Cannot build for production in GitHub Actions using webpack - javascript

I'm trying to deploy my project to Firebase Hosting using the following action:
on:
push:
branches:
- master
pull_request:
branches:
- master
jobs:
deploy_to_firebase_hosting:
runs-on: ubuntu-latest
steps:
- name: Checkout the repository
uses: actions/checkout#master
- name: Install Dependencies
run: npm install
- name: Build for production
run: npm run build-prod
- name: Deploy to Firebase
uses: w9jds/firebase-action#master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
The actions gets failed on Build For Production step. My build-prod script does webpack -p --mode production.
This is the error message for this failure:
> project-name#1.0.0 build-prod /home/runner/work/project-name/project-name
> webpack -p --mode production
/home/runner/work/project-name/project-name/node_modules/webpack-cli/bin/cli.js:93
throw err;
^
TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
...
I've been researching about this error and I found out that people solve it by deleting node_modules before running the build. So I ran another action, without the npm install part.
It fails again on Build for production, but with a different, much reasonable error:
> webpack -p --mode production
webpack not installed
Install webpack to start bundling:
$ npm install --save-dev webpack
npm ERR! code ELIFECYCLE
npm ERR! errno 1
What's the correct way to build a production bundle in Github Actions?
Thanks!

I had the exact same issue when trying to use GitHub actions to build & deploy a production Docker container.
It turned out the issue on my side was as a result of Webpack not having access to any environment variables (which my Webpack config required) at the point of build which caused it to error out with the same error you received above.
To fix this I added the following line to my build command:
--env.NODE_ENV=production
E.g my final build command called by the container was then:
node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --env.NODE_ENV=production --progress --config webpack.prod.js
Hope this helps!

Related

Svelte npm run dev Complier fail

Termux
$ npm run dev
> my-app#0.0.1 dev
> vite dev
usage: vite [options]
vite: error: argument cmd: invalid choice: 'dev' (choose from 'init', 'new', 'build', 'serve')
Svelte complier run
It's not a Termux question but rather a svelte/nodejs question. However, I assume you want to run the dev server and serve your project. (This is what we typically do in our vite dev script)
Change the line "dev": "vite dev" in your package.json to "dev": "vite". This will serve your project through vite's dev server.

error An unexpected error occurred: "EACCES: permission denied in github actions

Today when I run the yarn command in github actions, shows error like this:
Run rm -rf node-modules
yarn install v1.22.17
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
error An unexpected error occurred: "EACCES: permission denied, unlink '/home/runner/work/react-admin/react-admin/node_modules/.yarn-integrity'".
info If you think this is a bug, please open a bug report with the information provided in "/home/runner/work/react-admin/react-admin/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Error: Process completed with exit code 1.
I have already tried to delete the node_modules folder, by the way, the github actions virtual machine is new and did not contains the node_modules folder originally. what should I do to fix this problem? this is my github workflow define:
name: management-system-pro-umi
on:
push:
branches: [ umi ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- uses: actions/setup-node#v2
with:
node-version: 14
- name: Install yarn
uses: borales/actions-yarn#v2.1.0
with:
cmd: install
- name: Build React App
run: |
rm -rf node_modules
yarn
umi build
- name: Build image push to aliyun
uses: docker/build-push-action#v1
with:
registry: ${{ secrets.ALI_DOCKER_HUB_REGISTRY }}
username: ${{ secrets.ALIYUN_DOCKER_REPO_USER_NAME }}
password: ${{ secrets.ALIYUN_DOCKER_REPO_USER_PASSWORD }}
tags: ${{ github.sha }}
repository: reddwarf-pro/react-admin-new
path: '.'
# https://github.com/steebchen/kubectl
- name: deploy to cluster
uses: steebchen/kubectl#v2.0.0
with: # defaults to latest kubectl binary version
config: ${{ secrets.KUBE_CONFIG_DATA }}
command: set image --record deployment/react-admin-new react-admin=registry.cn-hangzhou.aliyuncs.com/reddwarf-pro/react-admin-new:${{ github.sha }} -n reddwarf-pro
- name: verify deployment
uses: steebchen/kubectl#v2.0.0
with:
config: ${{ secrets.KUBE_CONFIG_DATA }}
version: v1.21.0 # specify kubectl binary version explicitly
command: rollout status deployment/react-admin-new -n reddwarf-pro
I have read some other question, the all facing the problem in local machine. In the github actions virtual machine, when run into the yarn command, the error occured.
I read the official docs and found this:
Please keep in mind that this Action was originally written for GitHub
Actions beta (when Docker was the only way of doing things). Consider
using actions/setup-node to work with Yarn. This repository will be
mostly supporting the existing flows.
so I changed to use actions/setup-node repo, and do it like this:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- uses: actions/setup-node#v2
with:
node-version: 16
- run: npm install yarn -g
- name: Build React App
run: |
yarn
yarn global add umi
umi build
fixed it.

How do I debug a create-react-app on AWS Amplify

I'm following the tutorial on AWS Amplify to deploy a simple create-react-app. No code added to the initial boiler plate. However when I deploy the app and check the Url i see a:
This main.d1m8xst4r8xkbi.amplifyapp.com page can’t be found
Any clues on how i can proceed?
edit this was the build file:
version: 1
frontend:
phases:
# IMPORTANT - Please verify your build commands
build:
commands: []
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: /
files:
- '**/*'
cache:
paths: []
edit2 The command is "react-scripts build" and the build folder should share a directory with the package.json so I tried modifying the commands and files as follows:
build:
commands:
- "react-scripts build"
....
files:
- "build"
and it now throws a build error. I think I'm missing something and my syntax is off (sorry first time doing this!)
If I look at the build log for this error it shows:
2021-03-28T17:22:49.752Z [INFO]: ## Starting Frontend Build
# Starting phase: build
# Executing command: react-scripts build
edit3, i tried this:
version: 1
frontend:
phases:
# IMPORTANT - Please verify your build commands
build:
commands: "react-scripts build"
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: "/build"
files:
cache:
paths: []
and got this in the logs:
version: 1
frontend:
phases:
# IMPORTANT - Please verify your build commands
build:
commands: "react-scripts build"
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: "/build"
files:
cache:
paths: []
edit:
I've tried different things, including copying verbatim screenshots from the AWS amplify "hello world" tutorial. It's not working. I'm very confused as this is my first time deploying. Help is appreciated and encouraging!
edit, here is the build log from your suggestion:
# Starting phase: preBuild
# Executing command: npm install
2021-04-03T10:30:06.970Z [WARNING]: npm
2021-04-03T10:30:06.970Z [WARNING]: WARN saveError ENOENT: no such file or directory, open '/codebuild/output/src437022859/src/L34-1/package.json'
2021-04-03T10:30:06.974Z [WARNING]: npm
2021-04-03T10:30:06.974Z [WARNING]: notice created a lockfile as package-lock.json. You should commit this file.
2021-04-03T10:30:06.976Z [WARNING]: npm
2021-04-03T10:30:06.976Z [WARNING]: WARN enoent ENOENT: no such file or directory, open '/codebuild/output/src437022859/src/L34-1/package.json'
2021-04-03T10:30:06.980Z [WARNING]: npm
2021-04-03T10:30:06.980Z [WARNING]: WARN L34-1 No description
2021-04-03T10:30:06.984Z [WARNING]: npm
2021-04-03T10:30:06.984Z [WARNING]: WARN L34-1 No repository field.
2021-04-03T10:30:06.988Z [WARNING]: npm
2021-04-03T10:30:06.988Z [WARNING]: WARN L34-1 No README data
2021-04-03T10:30:06.992Z [WARNING]: npm
2021-04-03T10:30:06.992Z [WARNING]: WARN L34-1 No license field.
2021-04-03T10:30:06.992Z [WARNING]:
2021-04-03T10:30:07.239Z [INFO]: up to date in 0.365s
2021-04-03T10:30:07.239Z [INFO]: found 0 vulnerabilities
2021-04-03T10:30:07.323Z [INFO]: # Completed phase: preBuild
# Starting phase: build
2021-04-03T10:30:07.324Z [INFO]: # Executing command: npm run build
2021-04-03T10:30:07.471Z [WARNING]: npm
2021-04-03T10:30:07.471Z [WARNING]: ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /codebuild/output/src437022859/src/L34-1/package.json
npm ERR! errno -2
2021-04-03T10:30:07.472Z [WARNING]: npm
2021-04-03T10:30:07.473Z [WARNING]: ERR! enoent ENOENT: no such file or directory, open '/codebuild/output/src437022859/src/L34-1/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
2021-04-03T10:30:07.479Z [WARNING]:
2021-04-03T10:30:07.479Z [WARNING]: npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-04-03T10_30_07_473Z-debug.log
2021-04-03T10:30:07.479Z [HELP]: Outputting the npm debug log
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli '/root/.nvm/versions/node/v12.21.0/bin/node',
1 verbose cli '/root/.nvm/versions/node/v12.21.0/bin/npm',
1 verbose cli 'run',
1 verbose cli 'build'
1 verbose cli ]
2 info using npm#6.14.11
3 info using node#v12.21.0
4 verbose stack Error: ENOENT: no such file or directory, open '/codebuild/output/src437022859/src/L34-1/package.json'
5 verbose cwd /codebuild/output/src437022859/src/L34-1
6 verbose Linux 4.14.219-119.340.amzn1.x86_64
7 verbose argv "/root/.nvm/versions/node/v12.21.0/bin/node" "/root/.nvm/versions/node/v12.21.0/bin/npm" "run" "build"
8 verbose node v12.21.0
9 verbose npm v6.14.11
10 error code ENOENT
11 error syscall open
12 error path /codebuild/output/src437022859/src/L34-1/package.json
13 error errno -2
14 error enoent ENOENT: no such file or directory, open '/codebuild/output/src437022859/src/L34-1/package.json'
15 error enoent This is related to npm not being able to find a file.
16 verbose exit [ -2, true ]
2021-04-03T10:30:07.482Z [ERROR]: !!! Build failed
2021-04-03T10:30:07.482Z [ERROR]: !!! Non-Zero Exit Code detected
2021-04-03T10:30:07.482Z [INFO]: # Starting environment caching...
2021-04-03T10:30:07.482Z [INFO]: # Environment caching completed
Terminating logging...
I know maybe is obvious, but before deploy do you generated the build files? If not, you need to use this command below:
npm run build
Update your build setting as below in the Apps build settings in the AWS console.
version: 1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run build
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Once the build settings are updated, we need to add URL redirect's for React SPA under "Redirects and rewrites" in app settings.
Source Address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
Target Address:
/index.html
Read more here - https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa

problem while deploying react application to github

I created a todolist that is working properly in localhost.
Iam trying to deploy it on github, when I run '$ npm run deploy' in command propmt it showing error p
Added homepage, predeploy, deploy properties to package.json
installed gh-pages --save-dev
Please help I am a beginner
This is the command prompt error.
C:\Users\Syed\Desktop\project\todolist>npm run deploy
> todolist#0.1.0 predeploy C:\Users\Syed\Desktop\project\todolist
> npm run build
> todolist#0.1.0 build C:\Users\Syed\Desktop\project\todolist
> react-scripts build
Creating an optimized production build...
Compiled with warnings.
./src/App.js
Line 2:8: 'logo' is defined but never used no-unused-vars
Line 52:20: Expected to return a value in arrow function array-callback-return
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
55.54 KB build\static\js\2.0512a152.chunk.js
1.19 KB build\static\js\main.1e3fd05a.chunk.js
785 B build\static\js\runtime-main.ce724f51.js
657 B build\static\css\main.362672fb.chunk.css
The project was built assuming it is hosted at /To-Do-List/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
bit.ly/CRA-deploy
> todolist#0.1.0 deploy C:\Users\Syed\Desktop\project\todolist
> gh-pages -d build
fatal: A branch named 'gh-pages' already exists.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todolist#0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the todolist#0.1.0 deploy 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! C:\Users\Syed\AppData\Roaming\npm-cache\_logs\2020-07-02T01_49_57_997Z-debug.log
Please check this quickstart guide
You will need to set up the GitHub pages homepage link on your GitHub repository settings page first.
Then check the source as well.
Then save. That should work.
To solve the issue with
fatal: A branch named 'gh-pages' already exists.
remove the 'gh-pages/' folder at node_modeules/.cache/
This worked for me
I am not professional in react and these tools.
But error log states that you already have a branch named "gh-pages" check your github repository and delete it.
You would find this if you've searched a little bit.
Delete node_modules/gh-pages/.cache and try again.
Linux / macOS / Git bash: rm -rf node_modules/gh-pages/.cache

Heroku Build Fail [sh: 1: react-scripts: Permission denied]

----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 12.x...
Downloading and installing node 12.13.0...
Using default npm version: 6.12.0
-----> Installing dependencies
Prebuild detected (node_modules already exists)
Rebuilding any native modules
> nodemon#1.19.3 postinstall /tmp/build_33db88ab97938128199a401d17366aac/node_modules/nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
//REMOVED INSTALLATION TEXT HERE DUE TO CHAR LIMIT
-----> Build
Running heroku-postbuild
> website_setup#1.0.0 heroku-postbuild /tmp/build_33db88ab97938128199a401d17366aac
> NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
audited 905041 packages in 14.447s
found 1 moderate severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
> client#0.1.0 build /tmp/build_33db88ab97938128199a401d17366aac/client
> react-scripts build
sh: 1: react-scripts: Permission denied
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! client#0.1.0 build: `react-scripts build`
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the client#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! /tmp/npmcache.1egfD/_logs/2019-11-08T01_04_59_454Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! website_setup#1.0.0 heroku-postbuild: `NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client`
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the website_setup#1.0.0 heroku-postbuild 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! /tmp/npmcache.1egfD/_logs/2019-11-08T01_04_59_470Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- node_modules checked into source control
https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
Synopsis:
I recently finished MERN stack course and went to go push my build to Heroku but encountered the error above. I first thought it was a visual studio permissions error so I ran vs code with elevated privileges. This, however, did not work.
I've tried and had no success with:
Adding a nodejs script build package to my deployment
Modifying my package.json to incorporate engine which selects the version of node.js to run
Adding .js extensions to the end of the server in the scripts section thinking there may be a simple issue with that
Double checking that my local instance works properly (it does)
Promptly throwing my computer out my window (feels pretty good, but still not working)
Refer to this link to see how to check your file for the correct permissions and how to set them ( Updating file permissions with git-bash on Windows 7 )
sh: 1: react-scripts: Permission denied
So this is a permission issue. Go to the correct path that contains a react-scripts and do a chmod +x react-scripts will solve this issue.
I took a look at you GitHub repo and it seems to be a simple typo in your .gitignore file :
node_module/
config/default.json
And this should be :
node_modules/
config/default.json
Notice the name of node_modules folder ,so a quick fix would be to edit you .gitignore file and put the wright name , then run the following :
git rm -r --cached node_modules
delete node_modules in root directory as well in client/
git commit -am 'ignore node_modules'
And finally push your changes , this should fix the error .
check your package.json => React-script-->
step = 1==> "react-scripts": "(change_currend_version)"
Ex: "react-scripts": "1.0.1" change ==>"react-scripts": "3.4.3"
step = 2==> install ==> npm i
step = 3 ==> npm start

Categories