Heroku Unexpected token '<' Deployment error, leading to blank page - node.js

Question

I have been facing an unknown error after deploying on Heroku namely:
SyntaxError: Unexpected token '<'
However, deployment on GitHub pages works fine so I am unsure of the issue. Everything is working fine, except the actual page is just blank. When I view sources, it looks like this: Error
Here is my package.json file:
{
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.2",
"#mui/styled-engine-sc": "^5.5.2",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"autosuggest-highlight": "^3.2.1",
"axios": "^0.26.1",
"react": "^16.14.0",
"react-bootstrap": "^2.1.1",
"react-countup": "^6.1.1",
"react-dom": "^16.14.0",
"react-hook-form": "^7.29.0",
"react-icons": "^4.3.1",
"react-redux": "^7.2.8",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.3.0",
"react-scripts": "^5.0.0",
"react-scroll": "^1.8.4",
"react-text-typist": "^1.0.9",
"react-typist": "^2.0.5",
"redux": "^4.1.2",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "node --max_old_space_size=2560 node_modules/.bin/react-scripts start",
"build": "node --max_old_space_size=2560 node_modules/.bin/react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.2.3",
"sass": "^1.48.0"
}
}
Does anyone know what is the problem?