Issue deploying a reactjs app to herokuapp online - reactjs

Question

Error
2021-01-19T05:38:29.490890+00:00 app[web.1]: > MIT-Ask#1.0.0 start
2021-01-19T05:38:29.490895+00:00 app[web.1]: > nodemon --ignore client/ node index.js
2021-01-19T05:38:29.490895+00:00 app[web.1]:
2021-01-19T05:38:30.619237+00:00 app[web.1]: [33m[nodemon] 2.0.6[39m
2021-01-19T05:38:30.620714+00:00 app[web.1]: [33m[nodemon] to restart at any time, enter `rs`[39m
2021-01-19T05:38:30.621395+00:00 app[web.1]: [33m[nodemon] watching path(s): *.*[39m
2021-01-19T05:38:30.621500+00:00 app[web.1]: [33m[nodemon] watching extensions: js,mjs,json[39m
2021-01-19T05:38:30.622155+00:00 app[web.1]: [32m[nodemon] starting `node node index.js server/server.js`[39m
2021-01-19T05:38:33.899415+00:00 app[web.1]: node:internal/modules/cjs/loader:928
2021-01-19T05:38:33.899424+00:00 app[web.1]: throw err;
2021-01-19T05:38:33.899425+00:00 app[web.1]: ^
2021-01-19T05:38:33.899425+00:00 app[web.1]:
2021-01-19T05:38:33.899426+00:00 app[web.1]: Error: Cannot find module 'webpack'
2021-01-19T05:38:33.899426+00:00 app[web.1]: Require stack:
2021-01-19T05:38:33.899427+00:00 app[web.1]: - /app/webpack.config.js
2021-01-19T05:38:33.899427+00:00 app[web.1]: - /app/server/api.js
2021-01-19T05:38:33.899428+00:00 app[web.1]: - /app/server/server.js
2021-01-19T05:38:33.899429+00:00 app[web.1]: at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
2021-01-19T05:38:33.899429+00:00 app[web.1]: at Function.Module._load (node:internal/modules/cjs/loader:769:27)
2021-01-19T05:38:33.899430+00:00 app[web.1]: at Module.require (node:internal/modules/cjs/loader:997:19)
2021-01-19T05:38:33.899430+00:00 app[web.1]: at require (node:internal/modules/cjs/helpers:92:18)
2021-01-19T05:38:33.899430+00:00 app[web.1]: at Object.<anonymous> (/app/webpack.config.js:23:17)
2021-01-19T05:38:33.899431+00:00 app[web.1]: at Module._compile (node:internal/modules/cjs/loader:1108:14)
2021-01-19T05:38:33.899431+00:00 app[web.1]: at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
2021-01-19T05:38:33.899432+00:00 app[web.1]: at Module.load (node:internal/modules/cjs/loader:973:32)
2021-01-19T05:38:33.899433+00:00 app[web.1]: at Function.Module._load (node:internal/modules/cjs/loader:813:14)
2021-01-19T05:38:33.899433+00:00 app[web.1]: at Module.require (node:internal/modules/cjs/loader:997:19)
2021-01-19T05:38:33.899433+00:00 app[web.1]: at require (node:internal/modules/cjs/helpers:92:18)
2021-01-19T05:38:33.899434+00:00 app[web.1]: at Object.<anonymous> (/app/server/api.js:55:21)
2021-01-19T05:38:33.899435+00:00 app[web.1]: at Module._compile (node:internal/modules/cjs/loader:1108:14)
2021-01-19T05:38:33.899435+00:00 app[web.1]: at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
2021-01-19T05:38:33.899435+00:00 app[web.1]: at Module.load (node:internal/modules/cjs/loader:973:32)
2021-01-19T05:38:33.899436+00:00 app[web.1]: at Function.Module._load (node:internal/modules/cjs/loader:813:14) {
2021-01-19T05:38:33.899436+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',
2021-01-19T05:38:33.899437+00:00 app[web.1]: requireStack: [
2021-01-19T05:38:33.899437+00:00 app[web.1]: '/app/webpack.config.js',
2021-01-19T05:38:33.899437+00:00 app[web.1]: '/app/server/api.js',
2021-01-19T05:38:33.899438+00:00 app[web.1]: '/app/server/server.js'
2021-01-19T05:38:33.899438+00:00 app[web.1]: ]
2021-01-19T05:38:33.899438+00:00 app[web.1]: }
2021-01-19T05:38:33.914301+00:00 app[web.1]: [31m[nodemon] app crashed - waiting for file changes before starting...[39m
2021-01-19T05:39:25.752043+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2021-01-19T05:39:25.778172+00:00 heroku[web.1]: Stopping process with SIGKILL
2021-01-19T05:39:25.939029+00:00 heroku[web.1]: Process exited with status 137
2021-01-19T05:39:25.986786+00:00 heroku[web.1]: State changed from starting to crashed
2021-01-19T05:39:29.247585+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=mit-ask.herokuapp.com request_id=80c88480-df28-495a-9caf-dac6cd348f3b fwd="24.193.86.195" dyno= connect= service= status=503 bytes= protocol=https
2021-01-19T05:39:29.667520+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=mit-ask.herokuapp.com request_id=38dc7bc6-c389-4e27-bd13-da8e20804b4f fwd="24.193.86.195" dyno= connect= service= status=503 bytes= protocol=https
2021-01-19T05:39:29.971285+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=mit-ask.herokuapp.com request_id=f241cef6-8ff4-49df-baff-97d9818c9228 fwd="24.193.86.195" dyno= connect= service= status=503 bytes= protocol=https
I have looked up many of the solutions and reinstalled webpack. When I start up the app in vscode myself, everything works fine. Commands npm start and npm run hotloader both start up the server and the actual app fine. When I deploy it, it says successful but when I try to load the site, it gives the above error.
In my server.js file, I have const port = process.env.PORT || 3000, but it's still giving me the Web process failed to bind to $PORT within 60 seconds of launch error. I'm not sure what's wrong here.

Answer 1

On another platform, someone was able to successfully help me with this.
They said that it fails to bind to the port cause the server failed to start. Heroku deletes devDependencies after the first build, so webpack is probably deleted by the time the server starts.
The issue was that I was importing webpack in my api.js that wasn't necessary. After deleting that, the Heroku app deployed fine.