We Keep Coding

github page error: gh-pages -d build => ENOENT: no such file or directory

I made a portfolio page using VS code, but when I run npm run depoy, I get the error ENOENT: no such file or directory. I already have the repo on github and the page is up and running, but the page only displays the readme file. Here is the github page: https://pjfooeve09.github.io/parham-portfolio/. Also, I wanted to mention that my portfolio's directory does not have a index.html file. Every file name ends in .js.
package.json
{
"homepage": "http://pjfooeve09.github.io/parham-portfolio",
"name": "portfolio_nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "next start",
"build": "next build "
},
"dependencies": {
"next": "10.2.3",
"ngrok": "^4.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-icons": "^4.2.0",
"react-scripts": "^5.0.1",
"styled-components": "^5.3.0",
"styled-normalize": "^8.0.7"
},
"devDependencies": {
"gh-pages": "^4.0.0",
"next-optimized-images": "^2.6.2"
}
}

Heroku build failure when deploying Node.js/React app

I'm working on a React/Node app (using create-react-app) and trying to deploy it using Heroku. When we try to deploy on Heroku, we get the following error about react-scripts:
sh: 1: react-scripts: not found.
Edit: looking at the full logs, it seems that Heroku successfully installed the node packages but for some reason it can't find react-scripts.
We've tried referring to similar issues on here but haven't had any luck finding a solution.
Has anyone else ran into this and found a solution or know what might be causing?
Here's the full Heroku log and package.json files are below for reference:
-----> Building on the Heroku-20 stack
-----> Using buildpacks:
1. heroku/nodejs
2. mars/create-react-app
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 16.x
engines.npm (package.json): unspecified (use default)
Resolving node version 16.x...
Downloading and installing node 16.15.1...
Using default npm version: 8.11.0
-----> Installing dependencies
Installing node modules
added 203 packages, and audited 204 packages in 12s
58 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
-----> Build
Running heroku-postbuild
> pool-chem-calculator#1.0.0 heroku-postbuild
> cd client && npm run build
> client#0.1.0 build
> react-scripts build
sh: 1: react-scripts: not found
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
Here are the package.json files for the app:
Root:
{
"name": "pool-chem-calculator",
"version": "1.0.0",
"description": "Calculator that calculates pool water chemistry based off values in a form",
"main": "server/server.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "cd server && npm start",
"start:dev": "concurrently \"cd server && npm run dev\" \"cd client && npm start\"",
"test": "cd client && npm run test",
"lint": "npx eslint client/src",
"heroku-postbuild": "cd client && npm run build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/pschlafley/Pool-Chem-Calculator.git"
},
"author": "Peyton Schlafley, Tom Chestnut",
"license": "MIT",
"bugs": {
"url": "https://github.com/pschlafley/Pool-Chem-Calculator/issues"
},
"homepage": "https://github.com/pschlafley/Pool-Chem-Calculator#readme",
"devDependencies": {
"concurrently": "^7.2.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.28.0",
"prettier": "^2.5.1"
},
"dependencies": {
"if-env": "^1.0.4"
},
"engines": {
"node": "16.x"
}
}
Client:
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001",
"type": "module",
"dependencies": {
"#apollo/client": "^3.6.2",
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/material": "^5.3.0",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"formik": "^2.2.9",
"graphql": "^16.5.0",
"jwt-decode": "^3.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2",
"yup": "^0.32.11",
"react-device-detect": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Server:
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "server.js",
"type": "module",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"apollo-server-express": "^3.6.4",
"bcrypt": "^5.0.1",
"express": "^4.17.3",
"graphql": "^16.3.0",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.2.7"
},
"devDependencies": {
"nodemon": "^2.0.15"
}
}

I think you should do npm i react-scripts in client

Thanks for the help!
We ended up adding
"heroku-prebuild": "npm install && cd client && npm install && cd ../ && cd server && npm install",
to the scripts in the root package.json and so the packages get installed in both directories before the build process, and the build works on Heroku now.

How to stop Heroku from trying to install Husky

I have a Node app (React) on Heroku and the deploy and build was previous working fine, I have now added Husky, Lint-staged, Craco and WDYR to a new branch which works locally.
Upon trying to deploy and build this branch on Heroku, I am finding that the build fails due to Heroku trying to install Husky despite me not asking it to and it being a development tool. It makes sense that Heroku cannot find Husky as it is a dev dependency.
From what I can see Heroku is running the prepare script from the client package.json, which it shouldn't be.
How can I stop Heroku from trying to install Husky?
Here are my package.json files (haven't included server package.json as I'm not sure it's relevant).
root
{
"engines": {
"node": "12.x"
},
"scripts": {
"start": "cd server && node server.js",
"build": "cd client && npm run build",
"install-server": "cd server && npm ci",
"install-client": "cd client && npm ci",
"heroku-postbuild": "npm run install-server && npm run install-client && npm run build"
}
}
client
{
"name": "qupp",
"version": "1.0.0",
"description": "App that allows users to create playlists using Spotify's API",
"engines": {
"node": "12.x"
},
"scripts": {
"build:css": "postcss src/App.scss -o src/index.css",
"watch:css": "postcss src/App.scss -o src/index.css -w",
"start_new": "PORT=3002 craco start",
"start": "npm run watch:css & PORT=3002 craco start",
"build": "npm run build:css && craco build",
"test": "craco test",
"eject": "react-scripts eject",
"prepare": "cd ../ && husky install ./client/.husky"
},
"proxy": "http://127.0.0.1:8082/",
"author": "Daniel Blythe",
"license": "ISC",
"dependencies": {
"#craco/craco": "^6.3.0",
"#types/jest": "^24.0.17",
"#types/materialize-css": "^1.0.6",
"#types/node": "^12.7.1",
"#types/react": "^16.9.1",
"#types/react-dom": "^16.8.5",
"axios": "^0.18.0",
"babel-preset-es2015-node6": "^0.4.0",
"classnames": "^2.2.6",
"dotenv": "^6.1.0",
"firebase": "^8.2.4",
"http2": "^3.3.7",
"jwt-decode": "^2.2.0",
"morgan": "^1.9.1",
"node-pre-gyp": "^0.11.0",
"node-sass": "^4.9.4",
"postcss-cli": "^6.1.3",
"prop-types": "^15.6.2",
"ramda": "^0.27.1",
"re-base": "^4.0.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-dropzone": "^10.0.0",
"react-materialize": "^3.3.3",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-scripts": "4.0.3",
"react-spotify-player": "^1.0.4",
"react-transition-group": "^2.5.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"source-map-support": "^0.5.9",
"typescript": "^3.5.3"
},
"devDependencies": {
"#types/classnames": "^2.2.9",
"#types/react-redux": "^7.1.2",
"#welldone-software/why-did-you-render": "^6.2.1",
"autoprefixer": "^9.8.6",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.0",
"enzyme-to-json": "^3.3.5",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-no-autofix": "^1.1.2",
"eslint-plugin-prettier": "^3.4.1",
"husky": "^7.0.2",
"jest-dom": "^3.2.2",
"lint-staged": "^11.1.2",
"postcss": "^7.0.36",
"postcss-cli": "^6.1.2",
"prettier": "^2.3.2",
"pretty-quick": "^3.1.1",
"react-test-renderer": "^16.8.6",
"react-testing-library": "^7.0.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.14"
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Here is a screenshot of the error:

Here is the best solution:
run npm ci --only=production --ignore-scripts
https://github.com/typicode/husky/issues/920
Following is from Heroku support ticket (I did not check this info):
To cover the --only=production flag, you can set the environment
variable NPM_CONFIG_PRODUCTION=true
https://devcenter.heroku.com/articles/nodejs-support#only-installing-dependencies
While it isn’t possible to add the --ignore-scripts flag to the
install command directly, it can be set via npm config with npm config
set ignore-scripts true and this will achieve the same thing during
installation.
The above command could be included using heroku-specific-build steps.
e.g.;
"scripts": {
"heroku-prebuild": "npm config set ignore-scripts true",
...
}
Alternative solution (but it has a drawback):
You can direct Heroku to only install dependencies by setting environment variables NPM_CONFIG_PRODUCTION=true or YARN_PRODUCTION=true
See https://devcenter.heroku.com/articles/nodejs-support#only-installing-dependencies
This way you won't install devDependencies, assuming husky is in devDependencies (why would it not be?) meaning husky will never install.
The drawback is it won't install with any other devDependencies and i.e. I have there webpack which is required to run on build step. I don't want to move it from devDependencies to dependencies so I cant use this solution.

Cryptic Babel error in React web app when using Stellar SDK

Im developing a web app using React JS(Using Create React App) which will run on Stellar and Im using the official JS Stellar SDK. However, after integrating the Stellar SDK, I get a Babel error due to the Stellar SDK. Has anyone faced this issue before? The error is as follows :
./node_modules/js-xdr/lib/opaque.js
Module not found: Can't resolve 'babel-runtime/helpers/interop-
require' in user//node_modules/js-xdr/lib'
I have tried removing and installing the node modules but the error still persists.
My package.json is as follows:
{
"name": "myProject",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.17.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"font-awesome-animation": "^0.1.0",
"material-ui": "^0.20.0",
"moment": "^2.20.1",
"node-sass-chokidar": "^0.0.3",
"npm-run-all": "^4.1.2",
"react": "^16.2.0",
"react-atv-img": "^0.1.1",
"react-dom": "^16.2.0",
"react-flexbox-grid": "^2.0.0",
"react-lines-ellipsis": "^0.10.0",
"react-parallax": "^1.5.1",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"recharts": "^1.0.0-beta.7",
"redux": "^3.7.2",
"stellar-sdk": "^0.8.0"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Edit: Added the package.json

grunt command not found after installed grunt and grunt cli

I installed grunt and grunt cli, but still I got command not found error
{
"name": "angulartdd",
"version": "1.0.0",
"description": "1",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt-cli": "^1.2.0",
"grunt-karma": "^2.0.0",
"jasmine": "^2.5.2",
"karma": "^1.3.0",
"karma-jasmine": "^1.1.0"
}
}
I can try to install grunt globally but I want to know why this isn't working.

I installed grunt globally and it worked.
npm install -g grunt