Node/React app won't deploy to Heroku - node.js

My app has a React frontend and a Node backend; the BE serves the FE data through an API. It won't deploy to Heroku—stack trace is below.
Things I've tried:
This question. I've tried modelling my package.json files after a model repo mentioned in the answer, but no luck.
Deploying the model repo mentioned above—it worked fine.
Deploying the model repo to my own failing heroku app—it worked fine, so Heroku isn't the issue.
This question (I've checked react-scripts is listed as a dependency and not a dev-dependency).
I will probably end up taking the model repo as a starting point and gradually copying my project over, but would appreciate any info on what might be going wrong.
Stack Trace:
> fsevents#1.0.17 install /tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fsevents
> node-pre-gyp install --fallback-to-build
node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.0.17/fse-v1.0.17-node-v48-linux-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for fsevents#1.0.17 and node#6.10.3 (node-v48 ABI) (falling back to source compile with node-gyp)
make: Entering directory '/tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fsevents/build'
SOLINK_MODULE(target) Release/obj.target/.node
COPY Release/.node
make: Leaving directory '/tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fsevents/build'
> fibers#1.0.15 install /tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fibers
> node build.js || nodejs build.js
`linux-x64-48` exists; testing
Binary is fine; exiting
added 1242 packages in 52.433s
removed 1242 packages in 25.561s
> react-ui#0.1.0 build /tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client
> react-scripts build
sh: 1: react-scripts: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! react-ui#0.1.0 build: `react-scripts build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the react-ui#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
My server package.json:
{
"name": "in-search-of-happiness",
"engines": {
"node": "6.10.x"
},
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"heroku-postbuild": "cd client/ && npm install --only=dev && npm install && npm run build"
},
"cacheDirectories": [
"node_modules",
"client/node_modules"
],
"dependencies": {
"body-parser": "^1.17.2",
"cookie-parser": "^1.4.3",
"debug": "~2.6.3",
"express": "~4.15.2",
"jade": "^1.11.0",
"mongoose": "^4.10.8",
"morgan": "^1.8.2",
"serve-favicon": "^2.4.3",
"zombie": "^5.0.5"
}
}
My React package.json:
{
"name": "react-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^3.3.7",
"fetch": "^1.1.0",
"node-fetch": "^1.7.1",
"process-nextick-args": "^1.0.7",
"react": "^15.6.1",
"react-bootstrap": "^0.31.0",
"react-dom": "^15.6.1",
"react-scripts": "1.0.7",
"util-deprecate": "^1.0.2"
},
"devDependencies": {
"chai": "^4.0.2",
"eslint": "^4.0.0",
"sinon": "^2.3.5",
"wdio-mocha-framework": "^0.5.10",
"webdriverio": "^4.8.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001"
}

Hello your post build script needs some modification, kindly follow this convention
Replace reactFolderName to your folder name that contains the react frontend
Add This below snippet to your package.json under the scripts
scripts{
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix reactFolderName && npm run build --prefix reactFolderName"
}
And add this snippet to your index.js file
app = express()
app.use(express.static('reactFolderName/build'));
app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'reactFolderName', 'build', 'index.html')));

Related

Heroku Push rejected, Node.js & React App

Node.Js + React App, all work fine on localhost, when i push to heroku, Push rejected, idk why.
Please help my heroes.
Heroku Push logs:
> NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-paypal-button-v2#2.6.3
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
npm ERR! peer react#">=16.3.2" from #restart/context#2.1.4
npm ERR! node_modules/#restart/context
npm ERR! #restart/context#"^2.1.4" from react-bootstrap#1.6.6
npm ERR! node_modules/react-bootstrap
npm ERR! react-bootstrap#"^1.6.6" from the root project
npm ERR! 16 more (#restart/hooks, #testing-library/react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2#2.6.3
npm ERR! node_modules/react-paypal-button-v2
npm ERR! react-paypal-button-v2#"^2.6.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#17.0.2
npm ERR! node_modules/react
npm ERR! peer react#"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2#2.6.3
npm ERR! node_modules/react-paypal-button-v2
npm ERR! react-paypal-button-v2#"^2.6.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /tmp/npmcache.1sG84/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.1sG84/_logs/2022-12-15T17_08_01_767Z-debug-0.log
-----> Build failed
package.json React:
{
"name": "frontend",
"proxy": "http://127.0.0.1:5000",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^1.2.1",
"install": "^0.13.0",
"react": "^18.2.0",
"react-bootstrap": "^1.6.6",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-paypal-button-v2": "^2.6.3",
"react-redux": "^8.0.5",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.3.4",
"react-scripts": "^5.0.1",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"install-peers": "^1.0.4"
}
}
package.json Node.js:
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "server.js",
"type": "module",
"engines": {
"node": "17.x"
},
"scripts": {
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm start --prefix frontend",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"data:import": "node backend/seeder",
"data:destroy": "node backend/seeder -d",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
},
"author": "",
"license": "MIT",
"dependencies": {
"bcryptjs": "^2.4.3",
"colors": "^1.4.0",
"dotenv": "^8.6.0",
"express": "^4.18.2",
"express-async-handler": "^1.2.0",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.13.15",
"morgan": "^1.10.0",
"multer": "^1.4.4"
},
"devDependencies": {
"concurrently": "^5.3.0",
"nodemon": "^2.0.20"
}
}
Node.Js + React App, all work fine on localhost, when i push to heroku, Push rejected, idk why.
Please help my heroes.
Thanks for help.
You are directly depending on React 18 but react-paypal-button-v2#2.6.3 (the latest release at the time of writing) is not compatible with that version yet, as described in the error message:
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2#2.6.3
npm ERR! node_modules/react-paypal-button-v2
If you don't need anything in particular from React 18, your best bet is to downgrade to version 17.
If you need React 18, the safest thing to do is to wait for a new version of react-paypal-button that declares a compatible peer dependency. There is an open issue on the project requesting this.
The last option, which I do not recommend, is to ask Heroku to use legacy peer deps behaviour. This behaviour is deprected for a reason, and while it may let your install proceed, it could also lead to unpredictable bugs.
I see you running npm install --prefix frontend at the start of your Heroku logs. It should work if you add the flag --legacy-peer-deps to that command. Just a suggestion, use npm ci instead of the npm install to use the exact same dependencies locally and in the production server (you will have to push the package-lock.json as well, see the command reference: https://docs.npmjs.com/cli/v9/commands/npm-ci).

Peer dependency issue in React on Travis CI server

When attempting to build an application on a Travis CI server, an error returns stating a peer dependency issue as stated below:
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^15" from react-router-dom#4.1.1
npm ERR! node_modules/react-router-dom
npm ERR! react-router-dom#"^4.1.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#15.7.0
npm ERR! node_modules/react
npm ERR! peer react#"^15" from react-router-dom#4.1.1
npm ERR! node_modules/react-router-dom
npm ERR! react-router-dom#"^4.1.1" from the root project
npm ERR!
I was initially using npm but switched to yarn on the .travis.yml file, to no success.
How do I fix the issue?
Edit: Added package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": {
"/auth/*": {
"target": "http://localhost:5000"
},
"/api/*": {
"target": "http://localhost:5000"
}
},
"dependencies": {
"axios": "^0.16.2",
"materialize-css": "^0.100.2",
"react": "^16.0.0-alpha.13",
"react-dom": "^16.0.0-alpha.13",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.1",
"react-scripts": "1.0.10",
"redux": "^3.7.1",
"redux-form": "^7.0.1",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
As you can see here, react-router-dom has declared react package as a peerDependencies with a specific version. Meaning react-router-dom expects you to have installed react v15. But you have installed React v16.0.0-alpha.13.
You should downgrade your react package or upgrade your react-router-dom.

error while pushing node js project to heroku

I am getting this error while I am trying to push my project to heroku. Backend is writtend in nodeJS, frontend in React. I think the problem is heroku-postbuild, because if I remove it, push works. I was searching for it but still I have no idea what is the reason. Can somebody help me?
/tmp/build_7504975f08f330415cdefb27437cfad9/node_modules/.bin/node: 1: /tmp/build_7504975f08f330415cdefb27437cfad9/node_modules/.bin/node: MZ����#: not found
/tmp/build_7504975f08f330415cdefb27437cfad9/node_modules/.bin/node: 1: /tmp/build_7504975f08f330415cdefb27437cfad9/node_modules/.bin/node: Syntax error: word unexpected (expecting ")")
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! project#1.0.0 heroku-postbuild: `cd client && npm install && npm run build`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the project#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.W89m8/_logs/2018-11-13T21_37_22_676Z-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
package.json (server)
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js",
"server": "nodemon server.js",
"client-install": "npm install --prefix client",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "cd client && npm install && npm run build"
},
"author": "",
"license": "ISC",
"dependencies": {
"concurrently": "^4.0.1",
"express": "^4.16.4",
"jsonwebtoken": "^8.3.0",
"mongoose": "^5.3.4",
"node": "^8.10.0",
"nodemon": "^1.18.4",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"react-scripts": "1.0.11",
},
"devDependencies": {
"nodemon": "^1.18.4",
"react-scripts": "1.0.11"
}
}
package.json (client)
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"parallelshell": "^3.0.2",
"react-dom": "^16.5.2",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-scripts": "2.0.5",
"socket.io-client": "^1.7.3",
},
"scripts": {
"start": "parallelshell \"react-scripts start\" \"sass --watch src/styles/scss:src/styles/css --style compressed\"",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"sass": "sass --watch src/styles/scss:src/styles/css --style compressed",
"sass-nw": "sass src/styles/scss:src/styles/css"
},
"proxy": "http://localhost:5000/",
}
I ran into the similar error while troubleshooting a project. I resolved it by using the suggestions from the prompt.
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
So try do a "rm -rf node_modules" in the root directory if you checked node_modules into the repository. Heroku will install node_modules in the deployed environment and does not need your checked in version.

sh: react-scripts-start: command not found

I have a project that I cannot run npm start on.
I haven't touched this project in two weeks. The only thing I did yesterday was add a git repository, that's it.
When I tried to run npm start I got this error:
sh: react-scripts-start: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! bk-react-replica#0.1.0 start: 'react-scripts-start'
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the bk-react-replica#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I've looked at the solutions on other posts about this same error but none work for me. I've deleted the node_modules directory and package-lock.json files, then ran npm install.
However, I still get the same error message. Does anyone know what's wrong?
This is my package.json file:
{
"name": "bk-react-replica",
"version": "0.1.0",
"private": true,
"homepage": "http://qhafeezdomain.dreamhosters.com/projects/bkreplica",
"dependencies": {
"antd": "^3.3.0",
"normalize.css": "^8.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-native-scripts": "^1.13.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.4",
"react-scripts-cssmodules": "^1.0.171",
"redux": "^3.7.2"
},
"scripts": {
"start": "react-scripts-start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
As I will reference you to an answer I provided to a question similar to yours, run this:
npm i -g npm //which will update npm
rm -rf node_modules/ && npm cache clean // to remove the existing modules and clean the cache.
npm install //to re-install the project dependencies.
Edited:
I just noticed your package.json it should be:
"scripts": {
"start": "react-scripts start",
not
"scripts": {
"start": "react-scripts-start",

Npm prepublish script webpack not found

I am trying to modify a npm module and I want to include the modified module as a local dependency.
When deploying this app on hosting, I am facing a strange webpack not found problem. I managed to reproduce the problem in my local machine by removing webpack globally.
My package.json:
1) I try to include the local module in package.json dependencies:
{
"name": "parse-server-example",
"version": "1.4.0",
"description": "An example Parse API server using the parse-server module",
"main": "index.js",
"repository": {
"type": "git",
"url": "https://github.com/ParsePlatform/parse-server-example"
},
"license": "MIT",
"dependencies": {
"webpack": "2.3.3",
"express": "~4.11.x",
"kerberos": "~0.0.x",
"parse": "~1.8.0",
"parse-dashboard-simple": "./parse-dashboard-simple",
"parse-server": "*"
},
"scripts": {
"start": "node index.js"
},
"engines": {
"node": "7.6.0"
}
}
Take note that I have a local module called "./parse-dashboard-simple".
My local module's package.json:
{
"name": "parse-dashboard",
"parseDashboardFeatures": [
"Data Browser",
"Cloud Code Viewer",
"Cloud Code Jobs Viewer and Runner",
"Parse Config",
"API Console",
"Class Level Permissions Editor",
"Pointer Permissions Editor",
"Send Push Notifications",
"Logs Viewer",
"Push Status Page",
"Relation Editor"
],
"description": "The Parse Dashboard",
"keywords": [
"parse",
"dashboard"
],
"homepage": "https://github.com/ParsePlatform/parse-dashboard",
"bugs": "https://github.com/ParsePlatform/parse-dashboard/issues",
"version": "1.0.25",
"repository": {
"type": "git",
"url": "https://github.com/ParsePlatform/parse-dashboard"
},
"license": "SEE LICENSE IN LICENSE",
"files": [
"Parse-Dashboard",
"bin",
"README.md",
"LICENSE"
],
"dependencies": {
"bcryptjs": "^2.3.0",
"body-parser": "^1.15.2",
"commander": "^2.9.0",
"connect-flash": "^0.1.1",
"cookie-session": "^2.0.0-alpha.1",
"csurf": "^1.9.0",
"express": "^4.13.4",
"json-file-plus": "^3.2.0",
"package-json": "^2.3.1",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"webpack": "~1.12.0"
},
"devDependencies": {
"babel-core": "~5.8.12",
"babel-loader": "~5.3.0",
"babel-plugin-remove-proptypes": "~1.0.0",
"babel-polyfill": "^6.7.2",
"babel-runtime": "~5.8.25",
"css-loader": "~0.18.0",
"file-loader": "^0.8.5",
"history": "^2.1.2",
"http-server": "~0.8.5",
"immutable": "~3.7.5",
"immutable-devtools": "~0.0.4",
"jest-cli": "^12.0.2",
"js-beautify": "~1.5.0",
"marked": "^0.3.5",
"node-sass": "^3.7.0",
"parse": "1.6.14",
"prismjs": "~1.2.0",
"react": "^15.0.1",
"react-addons-test-utils": "^15.0.1",
"react-dnd": "~2.1.4",
"react-dnd-html5-backend": "~2.0.0",
"react-dom": "^15.0.1",
"react-router": "^2.6.0",
"request-promise": "^4.1.1",
"sass-loader": "~3.1.2",
"style-loader": "~0.12.3",
"svg-prep": "~1.0.0",
"transform-jest-deps": "^2.1.0",
"webpack": "~1.12.0"
},
"scripts": {
"dev": "node ./Parse-Dashboard/index.js & webpack --config webpack/build.config.js --devtool eval-source-map --progress --watch",
"dashboard": "node ./Parse-Dashboard/index.js & webpack --config webpack/build.config.js --progress --watch",
"pig": "http-server ./PIG -p 4041 -s & webpack --config webpack/PIG.config.js --progress --watch",
"build": "NODE_ENV=production webpack --config webpack/production.config.js && webpack --config webpack/PIG.config.js",
"test": "NODE_PATH=./node_modules jest",
"generate": "node scripts/generate.js",
"prepublish": "webpack --config webpack/publish.config.js",
"start": "node ./Parse-Dashboard/index.js"
},
"bin": {
"parse-dashboard": "./bin/parse-dashboard"
},
"engines": {
"node": "7.6.0"
},
"main": "Parse-Dashboard/app.js",
"jest": {
"testPathDirs": [
"src/lib"
],
"scriptPreprocessor": "<rootDir>/testing/preprocessor.js",
"testDirectoryName": "tests",
"testFileExtensions": [
"test.js"
],
"unmockedModulePathPatterns": [
"react",
"react-dom",
"react-addons-test-utils",
"fbjs"
]
}
}
If I run "npm install" at the root level of this project, I will get this error:
npm WARN prepublish-on-install As of npm#5, `prepublish` scripts will run only for `npm publish`.
npm WARN prepublish-on-install (In npm#4 and previous versions, it also runs for `npm install`.)
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.
> parse-dashboard#1.0.25 prepublish /mypath/-dashboard-advanced
> webpack --config webpack/publish.config.js
sh: webpack: command not found
npm ERR! addLocal Could not install /mypath/-dashboard-advanced
npm ERR! addLocal Could not install /mypath/-dashboard-simple
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v7.6.0
npm ERR! npm v4.1.2
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! parse-dashboard#1.0.25 prepublish: `webpack --config webpack/publish.config.js`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the parse-dashboard#1.0.25 prepublish script 'webpack --config webpack/publish.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the parse-dashboard package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --config webpack/publish.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs parse-dashboard
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls parse-dashboard
npm ERR! There is likely additional logging output above.
So my understanding is that the webpack is needed in prepublish script but it is not found. But I have intentionally added webpack as dependencies in both root project or the local module (in both dev and production dependencies just to be safe), why is webpack still not found?

Resources