Application error when deploying ReactJS app to Heroku - node.js

Question

I am trying to deploy my reactjs app to heroku. The deployment is successful, but whenever I open up the application, it just displays Application Error.
I have already added https://github.com/mars/create-react-app-buildpack into the buildpack in heroku settings and created a procfile with web: bin/boot inside of it.
This is the build log:
-----> Building on the Heroku-20 stack
-----> Using buildpacks:
1. heroku/nodejs
2. https://github.com/mars/create-react-app-buildpack
-----> 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): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 16.x...
Downloading and installing node 16.15.0...
Using default npm version: 8.5.5
-----> Restoring cache
Cached directories were not restored due to a change in version of node, npm, yarn or stack
Module installation may take longer for this build
-----> Installing dependencies
Installing node modules
added 1927 packages, and audited 1928 packages in 40s
80 packages are looking for funding
run `npm fund` for details
68 vulnerabilities (14 low, 17 moderate, 32 high, 5 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
-----> Build
Running build
> geoffhui.github.io#0.1.0 build
> react-scripts build
Creating an optimized production build...
Compiled with warnings.
./src/functions/data.js
Line 1: Multiline support is limited to browsers supporting ES5 only no-multi-str
./src/App.js
Line 20: Expected a default case default-case
Line 28: Expected a default case default-case
Line 78: Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener react/jsx-no-target-blank
Line 85: Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener react/jsx-no-target-blank
./src/components/FolderDataContainer.js
Line 34: Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener react/jsx-no-target-blank
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
48.24 KB build/static/js/1.0df6a7a0.chunk.js
2.33 KB build/static/js/main.b4134d42.chunk.js
1.32 KB build/static/css/main.618b06ac.chunk.css
763 B build/static/js/runtime~main.229c360f.js
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
-----> Caching build
- node_modules
-----> Pruning devDependencies
up to date, audited 1912 packages in 4s
77 packages are looking for funding
run `npm fund` for details
68 vulnerabilities (14 low, 17 moderate, 32 high, 5 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
-----> Build succeeded!
-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_HOME=/tmp/build_cefa3715/.heroku/node
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 16.x...
Downloading and installing node 16.15.0...
Using default npm version: 8.5.5
-----> Restoring cache
Cached directories were not restored due to a change in version of node, npm, yarn or stack
Module installation may take longer for this build
-----> Installing dependencies
Prebuild detected (node_modules already exists)
Rebuilding any native modules
rebuilt dependencies successfully
Installing any new modules (package.json)
added 16 packages, and audited 1928 packages in 7s
80 packages are looking for funding
run `npm fund` for details
68 vulnerabilities (14 low, 17 moderate, 32 high, 5 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
-----> Build
Running build
> geoffhui.github.io#0.1.0 build
> react-scripts build
Creating an optimized production build...
Compiled with warnings.
./src/functions/data.js
Line 1: Multiline support is limited to browsers supporting ES5 only no-multi-str
./src/App.js
Line 20: Expected a default case default-case
Line 28: Expected a default case default-case
Line 78: Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener react/jsx-no-target-blank
Line 85: Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener react/jsx-no-target-blank
./src/components/FolderDataContainer.js
Line 34: Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener react/jsx-no-target-blank
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
48.24 KB build/static/js/1.0df6a7a0.chunk.js
2.33 KB build/static/js/main.b4134d42.chunk.js
1.32 KB build/static/css/main.618b06ac.chunk.css
763 B build/static/js/runtime~main.229c360f.js
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
-----> Caching build
- node_modules
-----> Pruning devDependencies
up to date, audited 1912 packages in 4s
77 packages are looking for funding
run `npm fund` for details
68 vulnerabilities (14 low, 17 moderate, 32 high, 5 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git#v9.0.0
=====> Detected Framework: React.js (create-react-app)
Writing `static.json` to support create-react-app
Enabling runtime environment variables
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
=====> Detected Framework: Static HTML
-----> Installed nginx 1.21.3 to /app/bin
Using release configuration from last framework (Static HTML).
-----> Discovering process types
~ Mis-cased procfile detected; ignoring.
~ Rename it to Procfile to have it honored.
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 113.5M
-----> Launching...
Released v13
https://geoff-portfolio.herokuapp.com/ deployed to Heroku
Any ideas?

Answer 1

I've seen you are using two build packs
-----> Using buildpacks:
1. heroku/nodejs
2. https://github.com/mars/create-react-app-buildpack
Could you try to remove heroku/nodejs and keep only create-react-app-buildpack?
Steps : App -> Settings -> buildpacks
settings