JS Heap overflow error when deploying React app to Heroku

Question

Question:

I am trying to deploy a React app to Heroku. It builds and deploys fine but crashes immediately upon startup when I load the app. I thought it might be due to the start script being specified in package.json . Currently, Heroku is running react-scripts start which does not use the build files generated on the server. Should I change my start script to serve -s build ? If so, how can I change package.json to work for both dev and production environments?

This might not be the error but is my best guess. I've included my package.json as well as the Heroku build log and error log below for reference:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "18.0.0",
    "npm": "8.6.0"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.10.12",
    "@reduxjs/toolkit": "^1.8.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.1.3",
    "formik": "^2.2.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.6.0",
    "react-redux": "^8.0.4",
    "react-router-dom": "^6.4.2",
    "react-scripts": "^5.0.0",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.1",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "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"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.18",
    "redux-devtools-extension": "^2.13.9",
    "tailwindcss": "^3.1.8"
  }
}

-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  18.0.0
       engines.npm (package.json):   8.6.0
       
       Resolving node version 18.0.0...
       Downloading and installing node 18.0.0...
       npm 8.6.0 already installed with node
       
-----> Installing dependencies
       Installing node modules
       
       added 1511 packages, and audited 1512 packages in 37s
       
       221 packages are looking for funding
         run `npm fund` for details
       
       9 vulnerabilities (8 high, 1 critical)
       
       To address issues that do not require attention, run:
         npm audit fix
       
       To address all issues (including breaking changes), run:
         npm audit fix --force
       
       Run `npm audit` for details.
       
-----> Build
       Running build
       
       > client@0.1.0 build
       > react-scripts build
       
       Creating an optimized production build...
       Compiled successfully.
       
       File sizes after gzip:
       
         153.73 kB  build/static/js/main.c6cd6867.js
         2.88 kB    build/static/css/main.83c8bcea.css
       
       The project was built assuming it is hosted at /.
       You can control this with the homepage field in your package.json.
       
       The build folder is ready to be deployed.
       You may serve it with a static server:
       
         npm install -g serve
         serve -s build
       
       Find out more about deployment here:
       
         https://cra.link/deployment
       
       
-----> Caching build
       - npm cache
       
-----> Pruning devDependencies
       
       up to date, audited 1511 packages in 3s
       
       221 packages are looking for funding
         run `npm fund` for details
       
       9 vulnerabilities (8 high, 1 critical)
       
       To address issues that do not require attention, run:
         npm audit fix
       
       To address all issues (including breaking changes), run:
         npm audit fix --force
       
       Run `npm audit` for details.
       
-----> Build succeeded!
-----> Discovering process types
       Default types for buildpack -> web
-----> Compressing...
       Done: 115.7M
-----> Launching...
       Released v3
       https://frontend-ssm-2.herokuapp.com/ deployed to Heroku

2022-11-15T21:07:17.636954+00:00 heroku[web.1]: Starting process with command `npm start`
2022-11-15T21:07:19.638752+00:00 app[web.1]: 
2022-11-15T21:07:19.638793+00:00 app[web.1]: > client@0.1.0 start
2022-11-15T21:07:19.638793+00:00 app[web.1]: > react-scripts start
2022-11-15T21:07:19.638793+00:00 app[web.1]: 
2022-11-15T21:07:22.401261+00:00 app[web.1]: (node:29) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
2022-11-15T21:07:22.401290+00:00 app[web.1]: (Use `node --trace-deprecation ...` to show where the warning was created)
2022-11-15T21:07:22.401518+00:00 app[web.1]: (node:29) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
2022-11-15T21:07:22.448354+00:00 heroku[web.1]: State changed from starting to up
2022-11-15T21:07:23.075351+00:00 app[web.1]: Starting the development server...
2022-11-15T21:07:23.075368+00:00 app[web.1]: 
2022-11-15T21:07:42.183190+00:00 app[web.1]: 
2022-11-15T21:07:42.183223+00:00 app[web.1]: <--- Last few GCs --->
2022-11-15T21:07:42.183223+00:00 app[web.1]: 
2022-11-15T21:07:42.183225+00:00 app[web.1]: [29:0x5335210]    21288 ms: Scavenge 247.5 (257.9) -> 247.2 (258.1) MB, 1.0 / 0.0 ms  (average mu = 0.525, current mu = 0.140) allocation failure;
2022-11-15T21:07:42.183225+00:00 app[web.1]: [29:0x5335210]    21426 ms: Mark-sweep 247.9 (258.1) -> 247.4 (258.9) MB, 136.6 / 0.0 ms  (average mu = 0.493, current mu = 0.325) allocation failure; scavenge might not succeed
2022-11-15T21:07:42.183226+00:00 app[web.1]: [29:0x5335210]    22444 ms: Mark-sweep 248.5 (258.9) -> 247.9 (259.4) MB, 1014.2 / 0.0 ms  (average mu = 0.191, current mu = 0.004) allocation failure; scavenge might not succeed
2022-11-15T21:07:42.183226+00:00 app[web.1]: 
2022-11-15T21:07:42.183226+00:00 app[web.1]: 
2022-11-15T21:07:42.183226+00:00 app[web.1]: <--- JS stacktrace --->
2022-11-15T21:07:42.183226+00:00 app[web.1]: 
2022-11-15T21:07:42.183230+00:00 app[web.1]: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
2022-11-15T21:07:42.183931+00:00 app[web.1]: 1: 0xb57b90 node::Abort() [/app/.heroku/node/bin/node]
2022-11-15T21:07:42.184443+00:00 app[web.1]: 2: 0xa701b3 node::FatalError(char const*, char const*) [/app/.heroku/node/bin/node]
2022-11-15T21:07:42.185001+00:00 app[web.1]: 3: 0xd43b9e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/app/.heroku/node/bin/node]
2022-11-15T21:07:42.185563+00:00 app[web.1]: 4: 0xd43f17 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/app/.heroku/node/bin/node]
2022-11-15T21:07:42.186181+00:00 app[web.1]: 5: 0xf22ff5  [/app/.heroku/node/bin/node]
2022-11-15T21:07:42.186927+00:00 app[web.1]: 6: 0xf34ded v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/app/.heroku/node/bin/node]
2022-11-15T21:07:42.187750+00:00 app[web.1]: 7: 0xf1004a v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/app/.heroku/node/bin/node]
2022-11-15T21:07:42.188401+00:00 app[web.1]: 8: 0xf111d7 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/app/.heroku/node/bin/node]
2022-11-15T21:07:42.189066+00:00 app[web.1]: 9: 0xef3353 v8::internal::Factory::NewFillerObject(int, v8::internal::AllocationAlignment, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/app/.heroku/node/bin/node]
2022-11-15T21:07:42.189806+00:00 app[web.1]: 10: 0x12ac95f v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/app/.heroku/node/bin/node]
2022-11-15T21:07:42.190645+00:00 app[web.1]: 11: 0x16d8539  [/app/.heroku/node/bin/node]
2022-11-15T21:07:42.375434+00:00 heroku[web.1]: Process exited with status 1
2022-11-15T21:07:42.473048+00:00 heroku[web.1]: State changed from up to crashed
2022-11-15T21:08:59.059528+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=frontend-ssm-2.herokuapp.com request_id=d977d30c-5227-45d1-9254-bad262c1afe5 fwd="162.235.62.153" dyno= connect= service= status=503 bytes= protocol=https

Answer 1

Answer:

I was able to fix the error by updating the scripts in package.json to the following:

"scripts": {
    "start": "serve -s build",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Also, make sure to npm i --save serve as well so that Heroku can execute the serve command.