Heroku build failure when deploying Node.js/React app - javascript

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.

Related

Npm start on offline win10

I have React project, created on MacOs and i want to run it on win10, but win10 computer in corp's LAN, so i cannot use "npm install" to download all dependencies. Hence i got all of them and builded project via Git, so for now on win10 i have all files are needed to "npm start".
But here are several errors, when i tried to run dev server or builded project:
npm start (== "react-scripts start")
'react-scripts' is not recognized as an internal or external command
npm start (== "node node_modules/.bin/react-scripts start")
Unexpected token '.'
Non of additional slashes before .bin to screening not helped.
npx serve -s build
network to registry.npmjs.org/serve failed.
Unclear why it needs internet at all, i just want to run builded project.
All of advices are to run "npm install" before "npm start", but i cannot connect to central artifactory from our LAN and i already have all of dependencies.
Hence, there are way to just start dev server or pack all project's files in some analogue of .jar totally without internet?
package.json
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.1.0",
"#material-ui/core": "^4.11.0",
"arui-feather": "^18.4.0",
"axios": "^0.21.0",
"core-js": "^3.7.0",
"date-fns": "^2.0.0-beta.5",
"material-table": "^1.69.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-router": "latest",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
"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"
]
}
}

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...

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

Categories