Heroku push failing with Create-React-App - reactjs

Question

I'm trying to deploy my create-react-app using Heroku. When I do git push heroku master, the build fails.
This is the error log:
-----> 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_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 12.x...
Downloading and installing node 12.16.3...
Using default npm version: 6.14.4
-----> Installing dependencies
Installing node modules (package.json + package-lock)
> nodemailer#6.4.6 postinstall /tmp/build_258ba2b79ac9e7091bc7dd79a031dd4f/node_modules/nodemailer
> node -e "try{require('./postinstall')}catch(e){}"
=== Nodemailer 6.4.6 ===
Thank you for using Nodemailer for your email sending needs! While Nodemailer
itself is mostly meant to be a SMTP client there are other related projects in
the Nodemailer project as well.
For example:
> IMAP API ( https://imapapi.com ) is a server application to easily access
IMAP accounts via REST API
> NodemailerApp ( https://nodemailer.com/app/ ) is a cross platform GUI app to
debug emails
> styled-components#4.2.0 postinstall /tmp/build_258ba2b79ac9e7091bc7dd79a031dd4f/node_modules/styled-components
> node ./scripts/postinstall.js || exit 0
Use styled-components at work? Consider supporting our development efforts at https://opencollective.com/styled-components
added 1914 packages from 1179 contributors and audited 2053 packages in 49.627s
1 package is looking for funding
run `npm fund` for details
found 56466 vulnerabilities (39341 low, 26 moderate, 17098 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build
Running build
> juliesong#0.1.0 build /tmp/build_258ba2b79ac9e7091bc7dd79a031dd4f
> react-scripts build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
Failed to compile.
./src/components/PageIntro.js
Cannot find module: 'axios'. Make sure this package is installed.
You can install this package by running: npm install axios.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! juliesong#0.1.0 build: `react-scripts build `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the juliesong#0.1.0 build 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.6BFeR/_logs/2020-05-17T06_58_22_399Z-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 version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
- A module may be missing from 'dependencies' in package.json
https://devcenter.heroku.com/articles/troubleshooting-node-deploys#ensure-you-aren-t-relying-on-untracked-dependencies
Love,
Heroku
! Push rejected, failed to compile React.js (create-react-app) multi app.
! Push failed
Here's my package.json file, in case it helps:
{
"name": "juliesong",
"version": "0.1.0",
"private": true,
"homepage": "https://www.juliesong.me",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.17.1",
"nodemailer": "^6.4.6",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-preloaders": "^3.0.3",
"react-responsive": "^6.1.2",
"react-responsive-carousel": "^3.1.49",
"react-responsive-simple": "^0.1.2",
"react-router-dom": "^4.1.1",
"react-router-hash-link": "^1.2.1",
"react-scripts": "^3.0.0",
"styled-components": "^4.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build ",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public",
"predeploy": "npm run build && cp build/index.html build/404.html",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.4.3",
"#storybook/addon-actions": "^5.0.6",
"#storybook/addon-links": "^5.0.6",
"#storybook/addons": "^5.0.6",
"#storybook/react": "^5.0.6",
"babel-loader": "^8.0.5",
"gh-pages": "^2.2.0"
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/jiyoonee/Website-Portfolio.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/jiyoonee/Website-Portfolio/issues"
}
}
I did try to work around with gh-pages but it didn't seem to work so I tried switching to Heroku. It's my first time using it so any help on this issue would be appreciated. Thanks!