Heroku R14 warning for no apparent reason maybe strict mode problem? - reactjs

Question

I am getting a R14 warning on my app so I did reduce my app to only the home page to track the issue but what happened is the warning is still there any idea what might cause this ? I am kind of afraid that my package.json is wrong, so basically my app is only home page no functionality nothing could it be that my starting scripts are wrong and the app is starting in dev ? also I have and issue with strict mode how to disable strict mode in production ? I had to comment out the strict mode because the app is getting deployed on strict mode for some reason ?
2022-01-10T19:45:53.658182+00:00 heroku[web.1]: Process running mem=551M(107.7%)
2022-01-10T19:45:53.663719+00:00 heroku[web.1]: Error R14 (Memory quota exceeded)
{
"name": "app",
"version": "0.1.0",
"private": true,
"engines": {
"node": "14.17.4",
"npm": "6.14.14"
},
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/html2canvas": "^1.0.0",
"#types/jest": "^27.0.2",
"#types/jspdf": "^2.0.0",
"#types/node": "^16.11.6",
"#types/react": "^17.0.33",
"#types/react-dom": "^17.0.10",
"#types/react-router-dom": "^5.3.2",
"#types/uuid": "^8.3.3",
"html2canvas": "^1.3.3",
"jspdf": "^2.4.0",
"notistack": "^1.0.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"typescript": "^4.4.4",
"uuid": "^8.3.2",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}

Answer 1

Your start script runs react-scripts start:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
That is almost certainly wrong.
Assuming this is a standalone app, React shouldn't actually be running on Heroku. Instead, you should build a production build at compile time and then Heroku just needs to host your files as static files. This uses very little memory.
One option is to use this buildpack, which promises a zero-config way to get apps created via create-react-app up and running on Heroku:
This buildpack deploys a React UI as a static web site. The Nginx web server provides optimum performance and security for the runtime.
Configure your app to use this buildpack:
heroku buildpacks:set mars/create-react-app
Then redeploy.