0

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"
    ]
  }
}
Richardson
  • 1,804
  • 10
  • 38

1 Answers1

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.

ChrisGPT was on strike
  • 127,765
  • 105
  • 273
  • 257
  • @Chrris my app has no back end only frontend what do you think of the following code ? "Heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install && npm run build" – Richardson Jan 10 '22 at 20:34
  • That will change the `build` script but not what Heroku actually tries to _run_. The problem is the `start` script, not the `build` script. – ChrisGPT was on strike Jan 10 '22 at 20:38
  • so what should i put in the start script to prevent the error in your opinion ? the problem is consider my app to be a react static site , I want to try start: node server.js – Richardson Jan 10 '22 at 20:48
  • 1
    The buildpack I recommended above will build your app and host it as static files automatically. You don't need to do anything to your `start` script if you use that buildpack. If you prefer to write your own `server.js` you [may do so](https://stackoverflow.com/a/55266374/354577), but in that case you'd use the Node.js buildpack. There are several ways to make this work. – ChrisGPT was on strike Jan 10 '22 at 20:50
  • I wanted to learn what causing the erorr still the build pack will come handy – Richardson Jan 10 '22 at 20:52
  • You might find [this example repository helpful](https://github.com/mars/heroku-cra-node) if you want to learn now Node.js and React can work together on Heroku. – ChrisGPT was on strike Jan 10 '22 at 20:58
  • so it worked 100% solved the issue still I it is killing not knowing how :D the build pack is awsome. – Richardson Jan 10 '22 at 21:40
  • The short version is that in _development_, when you run `react-scripts start`, React does a _lot_ of work: watches for files to be modified so it can live reload, runs unoptimized code, etc. That's what your code was doing before. But all that stuff isn't necessary in production. The buildpack simply builds a production release that _does not need anything to run on the server at all_. React builds when you deploy, then it goes away and doesn't do anything. The production build is just code that gets sent to your users' browser to run _there_. The server has to do very little. – ChrisGPT was on strike Jan 10 '22 at 22:38