We Keep Coding

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.

Why do I keep getting Heroku 503 Error while in Production?

I'm trying to get my website to function properly after being deployed on Heroku. It is essentially a Youtube Clone; you sign up for an account and then you can upload videos. Locally, it runs correctly, but I constantly receive a 503 Error; this time while uploading a video. The thumbnails of the video do not load, see image below
The code is at this repo: https://github.com/aladin94/clone2.
The heroku website: https://afternoon-sea-81365.herokuapp.com/
The Package.json:
{
"name": "youtubeapp",
"version": "1.0.0",
"description": "youtube-clone",
"main": "index.js",
"engines": {
"node": "10.14.1",
"npm": "6.4.1"
},
"scripts": {
"start": "node index.js",
"build": "cd client && npm run build",
"install-client": "cd client && npm install",
"heroku-postbuild": "npm run install-client && npm run build",
"backend": "nodemon index.js",
"frontend": "npm run front --prefix client",
"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""
},
"author": "aladin feratovic",
"license": "ISC",
"dependencies": {
"bcrypt": "^3.0.6",
"body-parser": "^1.18.3",
"concurrently": "^4.1.0",
"cookie-parser": "^1.4.3",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"fluent-ffmpeg": "^2.1.2",
"jsonwebtoken": "^8.5.1",
"moment": "^2.24.0",
"mongoose": "^5.4.20",
"multer": "^1.4.2",
"nodemon": "^1.19.1",
"react-redux": "^5.0.7",
"socket.io": "^2.2.0"
},
"proxy": "http://localhost:5000"
}
The Heroku logs:
Not sure if the code for the routes (get/post) are not tuned properly for Production? I've attached the mongoDB database (whitelisted the ip too) and structured my files accordingly for Heroku.
Please let me know what i'm doing wrong.

Heroku deployment: JSON parse error in package.json despite being valid

I am trying to deploy a mern app, but I get the following error, despite checking my package.json file myself and in multiple websites, what could be the issue here please?
> Compressing source files... done.
Building source:
-----> Node.js app detected
parse error: Expected another key-value pair at line 12, column 3
! Unable to parse package.json
-----> 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
HERE IS MY PACKAGE.JSON FILE
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index",
"dev": "nodemon index",
"build": "cd client && npm run build",
"install-client": "cd client && npm install",
"heroku-postbuild": "npm run install-client && npm run build"
},
"keywords": ["books"],
"author": "",
"license": "ISC",
"dependencies": {
"#hapi/joi": "^17.1.1",
"bcrypt": "^5.0.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.9.18"
},
"devDependencies": {
"nodemon": "^2.0.4"
}
}

try this
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index",
"build": "cd client && npm run build",
"install-client": "cd client && npm install",
"heroku-postbuild": "npm run install-client && npm run build"
},
"keywords": ["books"],
"author": "",
"license": "ISC",
"dependencies": {
"#hapi/joi": "^17.1.1",
"bcrypt": "^5.0.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.9.18"
}
}

Cannot manage to install jest

I am using npm to install jest in order to perform some tests over my js code.
In order to install it I use the command:
$ npm install --save-dev jest
As described on their website.
However, it fails over and over again with these errors:
What should I do in order to install jest properly?
This is my package.json :
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-env": "^1.7.0",
"jest": "^23.5.0",
"react-scripts": "0.6.1"
},
"dependencies": {
"adal-angular": "^1.0.13",
"axios": "^0.15.3",
"bootstrap": "^3.3.7",
"jquery": "^3.1.1",
"lodash": "^4.16.4",
"react": "^15.4.2",
"react-bootstrap": "^0.30.5",
"react-bootstrap-typeahead": "^1.2.0",
"react-dom": "^15.4.2",
"react-http-request": "^1.0.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"description": "This project was bootstrapped with [Create React App]
(https://github.com/facebookincubator/create-react-app).",
"main": "index.js",
"author": "",
"license": "ISC"
}
Current message:
enter image description here

Please install react v16 for this:
npm install --save react#^16.4.2 react-dom#^16.4.2
then run this command:
npm update --save
to get all dependent packages

I simply deleted the node_modules and package-lock.json, and use yarn to re-install everything. And it worked...

'nodemon' is not recognized as an internal or external command, operable program or batch file

I'm trying to install nodemon globally, but I'm getting warning as mentioned in attached picture. May be because of warning, I'm not able to run nodemon.
My package.json
{
"name": "learn",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "himanshu",
"license": "ISC",
"dependencies": {
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.17.2",
"express": "^4.15.4",
"mongoose": "^4.11.7",
"morgan": "^1.8.2"
}
}

I have added C:\Users\username\AppData\Roaming\npm to the environment variables of my system and it solved my issue.