Heroku failed due to heroku[router] - reactjs

Question

I have nooooooo idea what happened or how to fix it. But I know the build and deploy succeeded, yet there was an error when it tried to serve on the heroku domain. This is the log
2021-09-23T17:54:03.000000+00:00 app[api]: Build started by user lotusms#outlook.com
2021-09-23T17:57:33.106282+00:00 app[api]: Deploy 311dbfec by user lotusms#outlook.com
2021-09-23T17:57:33.106282+00:00 app[api]: Release v5 created by user lotusms#outlook.com
2021-09-23T17:57:33.643634+00:00 heroku[web.1]: State changed from crashed to starting
2021-09-23T17:57:34.000000+00:00 app[api]: Build succeeded
2021-09-23T17:57:41.831375+00:00 heroku[web.1]: Starting process with command `npm start`
2021-09-23T17:57:42.751649+00:00 app[web.1]:
2021-09-23T17:57:42.751663+00:00 app[web.1]: > luis-portfolio#1.0.0 start /app
2021-09-23T17:57:42.751664+00:00 app[web.1]: > node backend/server.js
2021-09-23T17:57:42.751664+00:00 app[web.1]:
2021-09-23T17:57:42.850572+00:00 app[web.1]: internal/modules/cjs/loader.js:892
2021-09-23T17:57:42.850573+00:00 app[web.1]: throw err;
2021-09-23T17:57:42.850574+00:00 app[web.1]: ^
2021-09-23T17:57:42.850574+00:00 app[web.1]:
2021-09-23T18:11:55.176407+00:00 app[web.1]: Error: Cannot find module 'express-handlebars'
2021-09-23T18:11:55.176408+00:00 app[web.1]: Require stack:
2021-09-23T18:11:55.176408+00:00 app[web.1]: - /app/backend/server.js
2021-09-23T18:11:55.176409+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
2021-09-23T18:11:55.176409+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:745:27)
2021-09-23T18:11:55.176410+00:00 app[web.1]: at Module.require (internal/modules/cjs/loader.js:961:19)
2021-09-23T18:11:55.176410+00:00 app[web.1]: at require (internal/modules/cjs/helpers.js:92:18)
2021-09-23T18:11:55.176410+00:00 app[web.1]: at Object.<anonymous> (/app/backend/server.js:3:25)
2021-09-23T18:11:55.176410+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:1072:14)
2021-09-23T18:11:55.176411+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
2021-09-23T18:11:55.176411+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:937:32)
2021-09-23T18:11:55.176411+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:778:12)
2021-09-23T18:11:55.176412+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',
2021-09-23T18:11:55.176413+00:00 app[web.1]: requireStack: [ '/app/backend/server.js' ]
2021-09-23T18:11:55.183165+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2021-09-23T18:11:55.183332+00:00 app[web.1]: npm ERR! errno 1
2021-09-23T18:11:55.187383+00:00 app[web.1]: npm ERR! luis-portfolio#1.0.0 start: `node backend/server.js`
2021-09-23T18:11:55.187508+00:00 app[web.1]: npm ERR! Exit status 1
2021-09-23T18:11:55.187587+00:00 app[web.1]: npm ERR!
2021-09-23T18:11:55.187645+00:00 app[web.1]: npm ERR! Failed at the luis-portfolio#1.0.0 start script.
2021-09-23T18:11:55.187699+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2021-09-23T18:11:55.193992+00:00 app[web.1]:
2021-09-23T18:11:55.194070+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2021-09-23T18:11:55.194101+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2021-09-23T18_11_55_188Z-debug.log
2021-09-23T18:11:55.308995+00:00 heroku[web.1]: Process exited with status 1
2021-09-23T18:11:55.387625+00:00 heroku[web.1]: State changed from starting to crashed
2021-09-23T18:18:11.000000+00:00 app[api]: Build started by user lotusms#outlook.com
2021-09-23T18:21:37.829987+00:00 app[api]: Deploy 3133e1a6 by user lotusms#outlook.com
2021-09-23T18:21:37.829987+00:00 app[api]: Release v7 created by user lotusms#outlook.com
2021-09-23T18:21:38.000000+00:00 app[api]: Build succeeded
2021-09-23T18:21:38.201741+00:00 heroku[web.1]: State changed from crashed to starting
2021-09-23T18:21:48.297944+00:00 heroku[web.1]: Starting process with command `npm start`
2021-09-23T18:21:49.385182+00:00 app[web.1]:
2021-09-23T18:21:49.385194+00:00 app[web.1]: > luis-portfolio#1.0.0 start /app
2021-09-23T18:21:49.385194+00:00 app[web.1]: > node backend/server.js
2021-09-23T18:21:49.385195+00:00 app[web.1]:
2021-09-23T18:21:49.496716+00:00 app[web.1]: internal/modules/cjs/loader.js:892
2021-09-23T18:21:49.496718+00:00 app[web.1]: throw err;
2021-09-23T18:21:49.496718+00:00 app[web.1]: ^
2021-09-23T18:21:49.496719+00:00 app[web.1]:
2021-09-23T18:21:49.496719+00:00 app[web.1]: Error: Cannot find module 'cors'
2021-09-23T18:21:49.496719+00:00 app[web.1]: Require stack:
2021-09-23T18:21:49.496720+00:00 app[web.1]: - /app/backend/server.js
2021-09-23T18:21:49.496720+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
2021-09-23T18:21:49.496720+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:745:27)
2021-09-23T18:21:49.496721+00:00 app[web.1]: at Module.require (internal/modules/cjs/loader.js:961:19)
2021-09-23T18:21:49.496721+00:00 app[web.1]: at require (internal/modules/cjs/helpers.js:92:18)
2021-09-23T18:21:49.496722+00:00 app[web.1]: at Object.<anonymous> (/app/backend/server.js:5:25)
2021-09-23T18:21:49.496722+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:1072:14)
2021-09-23T18:21:49.496722+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
2021-09-23T18:21:49.496723+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:937:32)
2021-09-23T18:21:49.496723+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:778:12)
2021-09-23T18:21:49.496723+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12) {
2021-09-23T18:21:49.496724+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',
2021-09-23T18:21:49.496724+00:00 app[web.1]: requireStack: [ '/app/backend/server.js' ]
2021-09-23T18:21:49.496724+00:00 app[web.1]: }
2021-09-23T18:21:49.512189+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2021-09-23T18:21:49.512362+00:00 app[web.1]: npm ERR! errno 1
2021-09-23T18:21:49.515739+00:00 app[web.1]: npm ERR! luis-portfolio#1.0.0 start: `node backend/server.js`
2021-09-23T18:21:49.515768+00:00 app[web.1]: npm ERR! Exit status 1
2021-09-23T18:21:49.515827+00:00 app[web.1]: npm ERR!
2021-09-23T18:21:49.515861+00:00 app[web.1]: npm ERR! Failed at the luis-portfolio#1.0.0 start script.
2021-09-23T18:21:49.515902+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2021-09-23T18:21:49.611964+00:00 app[web.1]:
2021-09-23T18:21:49.612101+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2021-09-23T18:21:49.612151+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2021-09-23T18_21_49_516Z-debug.log
2021-09-23T18:21:49.736450+00:00 heroku[web.1]: Process exited with status 1
2021-09-23T18:21:49.804463+00:00 heroku[web.1]: State changed from starting to crashed
2021-09-23T18:21:51.473081+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=radiant-brook-92705.herokuapp.com request_id=6652a47c-6241-4d4f-a967-ebd6c8db8091 fwd="71.57.243.26" dyno= connect= service= status=503 bytes= protocol=https
Luiss-Mac-mini:luis-portfolio lotusms$ heroku logs
2021-09-23T18:23:37.573784+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2021-09-23T18:23:37.573953+00:00 app[web.1]: npm ERR! errno 1
2021-09-23T18:23:37.577270+00:00 app[web.1]: npm ERR! luis-portfolio#1.0.0 start: `node backend/server.js`
2021-09-23T18:23:37.577315+00:00 app[web.1]: npm ERR! Exit status 1
2021-09-23T18:23:37.577365+00:00 app[web.1]: npm ERR!
2021-09-23T18:23:37.577402+00:00 app[web.1]: npm ERR! Failed at the luis-portfolio#1.0.0 start script.
2021-09-23T18:23:37.577442+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2021-09-23T18:23:37.580907+00:00 app[web.1]:
2021-09-23T18:23:37.580982+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2021-09-23T18:23:37.581018+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2021-09-23T18_23_37_577Z-debug.log
2021-09-23T18:23:37.695597+00:00 heroku[web.1]: Process exited with status 1
2021-09-23T18:23:37.741882+00:00 heroku[web.1]: State changed from starting to crashed
2021-09-23T18:23:37.746297+00:00 heroku[web.1]: State changed from crashed to starting
2021-09-23T18:23:47.676591+00:00 heroku[web.1]: Starting process with command `npm start`
2021-09-23T18:23:48.916311+00:00 app[web.1]:
2021-09-23T18:23:48.916324+00:00 app[web.1]: > luis-portfolio#1.0.0 start /app
2021-09-23T18:23:48.916325+00:00 app[web.1]: > node backend/server.js
2021-09-23T18:23:48.916325+00:00 app[web.1]:
2021-09-23T18:23:49.020052+00:00 app[web.1]: internal/modules/cjs/loader.js:892
2021-09-23T18:23:49.020053+00:00 app[web.1]: throw err;
2021-09-23T18:23:49.020054+00:00 app[web.1]: ^
2021-09-23T18:23:49.020054+00:00 app[web.1]:
Luiss-Mac-mini:luis-portfolio lotusms$
What is going in here?
P.S. It's an app built with React in a client folder, and Express in a backend folder. Then an main package running the following
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon --watch backend --exec node backend/server.js",
"server": "nodemon backend/server.js",
"client": "npm start --prefix client",
"frontend": "npm run start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run start --prefix client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
Thanks in advance

Answer 1

Well, here's what fixed it for me. First of all this may be different for you if you have a different root architecture than mine. Your package.json and node_modules and dependencies may be in different places. But you can at least use my solution as a reference and adjust accordingly.
Root Struture
node_modules
package.json //we'll call it root-package for reference
- backend
- node_modules
package.json //we'll call it backend-package for reference
server.js
- client
- node_modules
- public
- build
- src
package.json //we'll call it frontend-package for reference
Though my entry is server.js in the backend folder, I am actually entering through an outer wrapping folder so I can keep a separation of concerns between the backend and client.
I moved all my package.json packages installed in devDependencies to the dependencies folder and made sure that my root-package.json served both of my backend-package.json and frontend-package.json concurrently and the directory was correct.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"client-install": "npm install --prefix client",
"start": "node backend/server.js",
"server": "nodemon backend/server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},