0

I am trying to deploy my app to heroku under a hobby plan. I am a total beginner and after a few hours of trying to solve this I am making my first stack overflow question!

I have a react app inside of the main repo. Both the react app and the root have a package.json. Here is the react-apps:

  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "browserslist": "^4.20.2",
    "ethers": "^5.5.4",
    "http-proxy-middleware": "^1.0.5",
    "i": "^0.3.7",
    "npm": "^8.5.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "redux": "^4.1.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "sass": "^1.49.9",
    "web-vitals": "^2.1.4",
    "web3.storage": "^3.5.7"
  },
  "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.3%",
      "not ie 11",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "nodemon": "^2.0.15",
    "normalize.css": "^8.0.1"
  },
  "proxy": "http://localhost:5000"
}

and here is the root's:

  "dependencies": {
    "browserslist": "^4.20.2"
  }
}
 => => transferring dockerfile: 37B                                        0.0s
 => [internal] load .dockerignore                                          0.0s
 => => transferring context: 34B                                           0.0s
 => [internal] load metadata for docker.io/library/python:3.9              0.7s
 => [internal] load metadata for docker.io/library/node:12                 0.7s
 => [build-stage 1/5] FROM docker.io/library/node:12@sha256:c68ae7e9b0a1f  0.0s
 => [internal] load build context                                          0.3s
 => => transferring context: 3.31MB                                        0.3s
 => [stage-1 1/6] FROM docker.io/library/python:3.9@sha256:7d200191eba9de  0.0s
 => CACHED [build-stage 2/5] WORKDIR /react-app                            0.0s
 => [build-stage 3/5] COPY react-app/. .                                   0.1s
 => CACHED [stage-1 2/6] WORKDIR /var/www                                  0.0s
 => [stage-1 3/6] COPY . .                                                 0.3s
 => [build-stage 4/5] RUN npm install                                     61.2s
 => ERROR [build-stage 5/5] RUN npm run build                             21.7s 
------                                                                          
 > [build-stage 5/5] RUN npm run build:                                         
#12 0.401                                                                       
#12 0.401 > react-app@0.1.0 build /react-app                                    
#12 0.401 > react-scripts build                                                 
#12 0.401                                                                       
#12 1.490 Creating an optimized production build...
#12 21.48 
#12 21.48 <--- Last few GCs --->
#12 21.48 
#12 21.48 [27:0x3ba6e80]    20177 ms: Mark-sweep 988.8 (996.1) -> 987.0 (995.4) MB, 865.2 / 0.0 ms  (average mu = 0.174, current mu = 0.002) allocation failure scavenge might not succeed
#12 21.48 [27:0x3ba6e80]    20572 ms: Mark-sweep 989.1 (995.6) -> 987.4 (995.6) MB, 393.7 / 0.0 ms  (average mu = 0.117, current mu = 0.004) allocation failure scavenge might not succeed
#12 21.48 
#12 21.48 
#12 21.48 <--- JS stacktrace --->
#12 21.48 
#12 21.48 ==== JS stack trace =========================================
#12 21.48 
#12 21.48     0: ExitFrame [pc: 0x140dff9]
#12 21.48 Security context: 0x2a53476408d1 <JSObject>
#12 21.48     1: SourceMapConsumer_allGeneratedPositionsFor [0x1f85164f7e49] [/react-app/node_modules/@babel/core/node_modules/source-map/lib/source-map-consumer.js:~178] [pc=0x22fa8e361c1b](this=0x1ebca6ade5e1 <BasicSourceMapConsumer map = 0x303a707af559>,0x34e5ac180161 <Object map = 0x303a707aec99>)
#12 21.48     2: /* anonymous */(aka /* anonymous */) [0x18bae5540169] [/react-app...
#12 21.48 
#12 21.48 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
#12 21.48  1: 0xa1a640 node::Abort() [/usr/local/bin/node]
#12 21.48  2: 0xa1aa4c node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
#12 21.48  3: 0xb9a9fe v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
#12 21.48  4: 0xb9ad79 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
#12 21.48  5: 0xd57ff5  [/usr/local/bin/node]
#12 21.48  6: 0xd58686 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
#12 21.49  7: 0xd64f45 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
#12 21.49  8: 0xd65df5 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
#12 21.49  9: 0xd688ac v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
#12 21.49 10: 0xd2f2cb v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/bin/node]
#12 21.49 11: 0x107189e v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
#12 21.49 12: 0x140dff9  [/usr/local/bin/node]
#12 21.66 npm ERR! code ELIFECYCLE
#12 21.66 npm ERR! errno 1
#12 21.66 npm ERR! react-app@0.1.0 build: `react-scripts build`
#12 21.66 npm ERR! Exit status 1
#12 21.66 npm ERR! 
#12 21.66 npm ERR! Failed at the react-app@0.1.0 build script.
#12 21.66 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
#12 21.67 
#12 21.67 npm ERR! A complete log of this run can be found in:
#12 21.67 npm ERR!     /root/.npm/_logs/2022-03-20T00_56_52_534Z-debug.log
------
executor failed running [/bin/sh -c npm run build]: exit code: 1
 ▸    Error: docker build exited with Error: 1

Thank you for the help. I have a presentation for this project soon (2 days) and would love to have a live demo.

1 Answers1

1

I had the same problem, and found a ton of Stack Overflow answers that recommended increasing memory via NODE_OPTIONS. Like this one!

But none of those worked for me. The only solution that worked was this one, which recommends adding GENERATE_SOURCEMAP=false to your .env file.

I don’t exactly understand why it works, but it does! Would greatly appreciate if anyone has insight on it.

Savanah
  • 11
  • 3
  • According to [React docs](https://create-react-app.dev/docs/advanced-configuration), "When set to false, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines." It's because it takes more memory to map the JS source than it would to skip that step, so you avoid the "JavaScript heap out of memory" error by shrinking the resource straining on the heap. – Jacob K Mar 20 '22 at 02:18