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
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"
]
}
}
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.
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"
}
}
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...
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