React.js app crashes when deploying to Heroku due to error: "JavaScript heap out of memory"

Question

I am trying to deploy a React.js website to Heroku. I deployed another very similar site just 2 days ago with no issues.

After running npm run build and deploying the site via the heroku CLI, I get the following error log. Looks like I have a memory leak somewhere but I have no idea how to debug that. Any help would be much appreciated as I am new to web dev and much of deployment is still a black box to me.

2022-06-02T22:04:20.000000+00:00 app[api]: Build started by user josiahbrown321@gmail.com
2022-06-02T22:06:07.918530+00:00 app[api]: Release v4 created by user josiahbrown321@gmail.com
2022-06-02T22:06:07.918530+00:00 app[api]: Deploy 09d49466 by user josiahbrown321@gmail.com
2022-06-02T22:06:08.364741+00:00 heroku[web.1]: State changed from crashed to starting
2022-06-02T22:06:14.978888+00:00 heroku[web.1]: Starting process with command `npm start`
2022-06-02T22:06:17.037702+00:00 app[web.1]: 
2022-06-02T22:06:17.037716+00:00 app[web.1]: > josiah-brown-portfolio@0.1.0 start
2022-06-02T22:06:17.037716+00:00 app[web.1]: > react-scripts start
2022-06-02T22:06:17.037717+00:00 app[web.1]: 
2022-06-02T22:06:18.000000+00:00 app[api]: Build succeeded
2022-06-02T22:06:18.669973+00:00 app[web.1]: (node:29) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
2022-06-02T22:06:18.669992+00:00 app[web.1]: (Use `node --trace-deprecation ...` to show where the warning was created)
2022-06-02T22:06:18.861890+00:00 app[web.1]: Starting the development server...
2022-06-02T22:06:18.861891+00:00 app[web.1]: 
2022-06-02T22:06:19.256906+00:00 heroku[web.1]: State changed from starting to up
2022-06-02T22:06:48.654767+00:00 app[web.1]: 
2022-06-02T22:06:48.654776+00:00 app[web.1]: <--- Last few GCs --->
2022-06-02T22:06:48.654777+00:00 app[web.1]: 
2022-06-02T22:06:48.654785+00:00 app[web.1]: [29:0x55456a0]    31521 ms: Mark-sweep 251.3 (259.0) -> 250.9 (259.7) MB, 256.0 / 0.1 ms  (average mu = 0.253, current mu = 0.028) allocation failure scavenge might not succeed
2022-06-02T22:06:48.654785+00:00 app[web.1]: 
2022-06-02T22:06:48.654785+00:00 app[web.1]: 
2022-06-02T22:06:48.654786+00:00 app[web.1]: <--- JS stacktrace --->
2022-06-02T22:06:48.654786+00:00 app[web.1]: 
2022-06-02T22:06:48.654793+00:00 app[web.1]: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
2022-06-02T22:06:48.655424+00:00 app[web.1]: 1: 0xb09c10 node::Abort() [node]
2022-06-02T22:06:48.655868+00:00 app[web.1]: 2: 0xa1c193 node::FatalError(char const*, char const*) [node]
2022-06-02T22:06:48.656391+00:00 app[web.1]: 3: 0xcf8dde v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
2022-06-02T22:06:48.656901+00:00 app[web.1]: 4: 0xcf9157 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
2022-06-02T22:06:48.657491+00:00 app[web.1]: 5: 0xeb09f5  [node]
2022-06-02T22:06:48.658074+00:00 app[web.1]: 6: 0xec06bd v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
2022-06-02T22:06:48.658665+00:00 app[web.1]: 7: 0xec33be v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
2022-06-02T22:06:48.659246+00:00 app[web.1]: 8: 0xe848fa v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
2022-06-02T22:06:48.659951+00:00 app[web.1]: 9: 0x11fd646 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
2022-06-02T22:06:48.660813+00:00 app[web.1]: 10: 0x15f20b9  [node]
2022-06-02T22:06:48.802876+00:00 heroku[web.1]: Process exited with status 1
2022-06-02T22:06:48.896859+00:00 heroku[web.1]: State changed from up to crashed
2022-06-02T22:06:48.900511+00:00 heroku[web.1]: State changed from crashed to starting
2022-06-02T22:06:56.517346+00:00 heroku[web.1]: Starting process with command `npm start`
2022-06-02T22:06:58.194575+00:00 app[web.1]: 
2022-06-02T22:06:58.194585+00:00 app[web.1]: > josiah-brown-portfolio@0.1.0 start
2022-06-02T22:06:58.194586+00:00 app[web.1]: > react-scripts start
2022-06-02T22:06:58.194586+00:00 app[web.1]: 
2022-06-02T22:06:59.570339+00:00 app[web.1]: (node:29) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
2022-06-02T22:06:59.570348+00:00 app[web.1]: (Use `node --trace-deprecation ...` to show where the warning was created)
2022-06-02T22:06:59.743680+00:00 app[web.1]: Starting the development server...
2022-06-02T22:06:59.743681+00:00 app[web.1]: 
2022-06-02T22:06:59.887049+00:00 heroku[web.1]: State changed from starting to up
2022-06-02T22:07:25.570704+00:00 app[web.1]: 
2022-06-02T22:07:25.570714+00:00 app[web.1]: <--- Last few GCs --->
2022-06-02T22:07:25.570714+00:00 app[web.1]: 
2022-06-02T22:07:25.570721+00:00 app[web.1]: [29:0x59cc6a0]    27066 ms: Mark-sweep (reduce) 250.4 (257.8) -> 250.1 (258.1) MB, 96.2 / 0.0 ms  (+ 833.7 ms in 38 steps since start of marking, biggest step 732.2 ms, walltime since start of marking 958 ms) (average mu = 0.298, current mu = 0.096) final[29:0x59cc6a0]    27287 ms: Mark-sweep 251.2 (258.1) -> 250.7 (259.8) MB, 218.9 / 0.0 ms  (average mu = 0.245, current mu = 0.013) allocation failure scavenge might not succeed
2022-06-02T22:07:25.570721+00:00 app[web.1]: 
2022-06-02T22:07:25.570721+00:00 app[web.1]: 
2022-06-02T22:07:25.570722+00:00 app[web.1]: <--- JS stacktrace --->
2022-06-02T22:07:25.570722+00:00 app[web.1]: 
2022-06-02T22:07:25.570728+00:00 app[web.1]: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
2022-06-02T22:07:25.571334+00:00 app[web.1]: 1: 0xb09c10 node::Abort() [node]
2022-06-02T22:07:25.571796+00:00 app[web.1]: 2: 0xa1c193 node::FatalError(char const*, char const*) [node]
2022-06-02T22:07:25.572304+00:00 app[web.1]: 3: 0xcf8dde v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
2022-06-02T22:07:25.572793+00:00 app[web.1]: 4: 0xcf9157 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
2022-06-02T22:07:25.573363+00:00 app[web.1]: 5: 0xeb09f5  [node]
2022-06-02T22:07:25.573949+00:00 app[web.1]: 6: 0xec06bd v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
2022-06-02T22:07:25.574527+00:00 app[web.1]: 7: 0xec33be v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
2022-06-02T22:07:25.575093+00:00 app[web.1]: 8: 0xe848fa v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
2022-06-02T22:07:25.575788+00:00 app[web.1]: 9: 0x11fd646 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
2022-06-02T22:07:25.576525+00:00 app[web.1]: 10: 0x15f20b9  [node]
2022-06-02T22:07:25.599722+00:00 heroku[router]: at=error code=H13 desc="Connection closed without response" method=GET path="/" host=josiah-brown.herokuapp.com request_id=694d77bb-b30a-4aea-bcc2-9ff2774cc96a fwd="104.187.161.249" dyno=web.1 connect=5000ms service=24247ms status=503 bytes=0 protocol=https
2022-06-02T22:07:25.722413+00:00 heroku[web.1]: Process exited with status 1
2022-06-02T22:07:25.913292+00:00 heroku[web.1]: State changed from up to crashed
2022-06-02T22:07:30.740406+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=josiah-brown.herokuapp.com request_id=b13bfd7c-d7e1-481e-8420-d577e8fe3710 fwd="104.187.161.249" dyno=web.1 connect=5001ms service= status=503 bytes= protocol=https

---- UPDATE ---- I added "build": "react-scripts --max_old_space_size=4096 build" to my package.json as this question suggests. I also tested with a value of 256. Getting the same error. Below is my full package.json file.

{
  "name": "josiah-brown-portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "jquery": "^3.6.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-icons": "^4.4.0",
    "react-scripts": "^2.1.3",
    "use-local-storage": "^2.3.6",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 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"
    ]
  }
}

Does this answer your question? [yarn build in ReactJS, Allocation failed - JavaScript heap out of memory](https://stackoverflow.com/questions/57923800/yarn-build-in-reactjs-allocation-failed-javascript-heap-out-of-memory) — Chad, Jun 02 '22 at 22:19
@Chad I tried adding that line to ```package.json``` but am getting the same error. — JBrown, Jun 03 '22 at 13:49

React.js app crashes when deploying to Heroku due to error: "JavaScript heap out of memory"

0 Answers0