Allocation failed - JavaScript heap out of memory

[sonjoydatta]

I am working on a project which is developing with NextJs and ReactJs. Suddenly this project showing Allocation failed - JavaScript heap out of memory problem. I have tried all the resources online but, those are not working for me. I think, maybe something error occurred in next.config.js or webpack but, I am not sure about it.

package.json

{
  "name": "personal-blog",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-regular-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "bootstrap": "^4.4.1",
    "dotenv": "^8.2.0",
    "isomorphic-unfetch": "^3.0.0",
    "moment": "^2.24.0",
    "next": "9.3.5",
    "node-fetch": "^2.6.0",
    "react": "16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-debounce-input": "^3.2.2",
    "react-dom": "16.13.1",
    "react-moment": "^0.9.7"
  },
  "devDependencies": {
    "sass": "^1.26.5"
  }
}

next.config.js

const webpack = require("webpack");
require("dotenv").config();

module.exports = {
  webpack: config => {
    config.node = {
      fs: 'empty'
    }

    const env = Object.keys(process.env).reduce((acc, curr) => {
      acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
      return acc;
   }, {});

    config.plugins.push(new webpack.DefinePlugin(env));
    return config
  }
}

Error in Visual Code terminal

<--- Last few GCs --->

[4562:0x103e3b000]   161295 ms: Mark-sweep 2041.6 (2051.3) -> 2040.7 (2051.3) MB, 3551.0 / 0.0 ms  (average mu = 0.370, current mu = 0.462) allocation failure scavenge might not succeed
[4562:0x103e3b000]   170945 ms: Mark-sweep 2041.8 (2051.5) -> 2041.2 (2051.5) MB, 8225.9 / 0.2 ms  (average mu = 0.253, current mu = 0.148) allocation failure GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x10072e699]
Security context: 0x3ecf281008a1 <JSObject>
    1: createElement(aka createElement) [0x3ecf3bee16f9] [/Users/pater/Desktop/personal-blog/node_modules/react/cjs/react.development.js:~727] [pc=0x1d716fb9bc21](this=0x3ecfe42004a9 <undefined>,0x3ecffb609dc1 <String[#3]: div>,0x3ecfe4f40389 <Object map = 0x3ecfdd48e531>,0x3ecfe42004a9 <undefined>)
    2: arguments adaptor frame: 2->3
    3: createElement...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Writing Node.js report to file: report.20200424.120915.4562.0.001.json
Node.js report completed
 1: 0x100b6a52a node::Abort() (.cold.1) [/usr/local/bin/node]
 2: 0x100081f70 node::FatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0x100082098 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 4: 0x10017461d v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0x1001745c7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 6: 0x10028a569 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 7: 0x10028b8ee v8::internal::Heap::MarkCompactPrologue() [/usr/local/bin/node]
 8: 0x1002894eb v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
 9: 0x100287f93 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
10: 0x10028f6da v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x10028fbd0 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/usr/local/bin/node]
12: 0x10026d8c6 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType) [/usr/local/bin/node]
13: 0x1004bc90e v8::internal::Runtime_AllocateInOldGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
14: 0x10072e699 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
15: 0x1d716fb9bc21 
Abort

[jazaki]

any updates on this yet ?

[ezalorsara]

Any update, I',m having this issue in github workflow

[ezalorsara]

@jazaki hi I solve my problem by using node version 12.18.2

[mplusr]

Same issue. My node version is 14.15.3

[Joris-Hotton]

Hi !

Got the same issue :(

NextJS: v12.1
Node: v16.14.1

I'm using next-transpile-modules: v9.0.0

I'm on MAC M1, the issue pop from nowhere, really frustrating

[sonjoydatta]

This is commonly caused when JavaScript has a lot of processes to handle, and the default heap memory allocated by Node. js needs more space to process the script you are currently running.

Check out the solution, https://sebhastian.com/javascript-heap-out-of-memory

[Joris-Hotton]

Already tried, at 5 GB node crash. Start at 1GB then keep growing until crash.

Didn't found a solution yet

[sonjoydatta]

That's means, you need more ram or something is wrong with your third party packages. For a deep investigation can you share your package.json file?

[Joris-Hotton]

16GB ram on my MAC M1.
The ram is increasing constantly, but not everytime, idk why.

{ "version": "0.1.0", "private": true, "scripts": { "prepare": "husky install", "pre": "npm run locales-sync && patch-package", "dev": "npm run pre && next dev", "start": "next start --hostname 0.0.0.0", "dev-debug": "npm run pre && NODE_OPTIONS='--inspect' next dev", "build": "npm run pre && next build", "lint": "tsc --noEmit && eslint --fix . && prettier --write ./src", "test": "jest", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook", "build-alpha": "npm run build && npm run start", "locales-sync": "npx i18next-locales-sync -p en-US -s de-DE es-ES fr-FR it-IT ja-JP pl-PL pt-BR ru-RU -l ./public/locales", "cypress:open": "cypress open" }, "dependencies": { "@hookform/resolvers": "^2.8.1", "@mui/material": "^5.0.6", "@mui/x-data-grid-pro": "^5.6.0", "@reduxjs/toolkit": "^1.6.1", "@types/react-select": "^4.0.17", "@types/yup": "^0.29.13", "axios": "^0.21.4", "classnames": "^2.3.1", "cross-env": "^7.0.3", "event-source-polyfill": "^1.0.25", "express": "^4.17.3", "form-data": "^4.0.0", "formidable": "^2.0.1", "https-browserify": "^1.0.0", "i": "^0.3.7", "isomorphic-unfetch": "^3.1.0", "jwt-decode": "^3.1.2", "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1", "next": "12.1", "next-auth": "^4.2.1", "next-i18next": "^10.3.0", "next-transpile-modules": "^9.0.0", "patch-package": "^6.4.7", "pino": "^7.8.0", "pino-elasticsearch": "^6.2.0", "postcss-loader": "^6.1.1", "query-string": "^7.1.1", "react": "^17.0.2", "react-beautiful-dnd": "^13.1.0", "react-dom": "^17.0.2", "react-dropzone": "^11.4.2", "react-easy-crop": "^4.0.1", "react-hook-form": "^7.15.4", "react-konami-code": "^2.2.2", "react-redux": "^7.2.6", "react-select": "^4.3.1", "react-textarea-autosize": "^8.3.3", "react-window": "^1.8.6", "react-window-infinite-loader": "^1.0.7", "redux": "^4.1.2", "stream-http": "^3.2.0", "swr": "^1.2.1", "yup": "^0.32.9" }, "devDependencies": { "@swc/cli": "^0.1.55", "@swc/core": "^1.2.156", "@testing-library/dom": "^8.2.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^12.0.0", "@testing-library/user-event": "^13.2.1", "@types/axios": "^0.14.0", "@types/classnames": "^2.3.1", "@types/event-source-polyfill": "^1.0.0", "@types/formidable": "^1.2.4", "@types/jest": "^27.0.1", "@types/lodash.debounce": "^4.0.6", "@types/lodash.throttle": "^4.1.6", "@types/node": "^16.7.2", "@types/react": "^17.0.19", "@types/react-beautiful-dnd": "^13.1.2", "@types/react-dom": "^17.0.9", "@types/react-redux": "^7.1.23", "@types/react-window": "^1.8.5", "@types/react-window-infinite-loader": "^1.0.5", "@typescript-eslint/eslint-plugin": "^4.29.3", "@typescript-eslint/parser": "^4.29.3", "autoprefixer": "^10.3.2", "css-loader": "^6.2.0", "eslint": "^7.32.0", "eslint-config-next": "^12.1.0", "eslint-config-prettier": "^8.3.0", "eslint-config-standard": "^16.0.3", "eslint-plugin-cypress": "^2.12.1", "eslint-plugin-import": "^2.24.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-promise": "^5.1.0", "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.2.0", "husky": "^7.0.2", "i18next-locales-sync": "^1.1.1", "identity-obj-proxy": "^3.0.0", "jest": "^27.0.6", "path-browserify": "^1.0.1", "postcss": "^8.4.6", "postcss-import": "^14.0.2", "prettier": "^2.3.2", "sass": "^1.38.1", "sass-loader": "^12.1.0", "style-loader": "^3.2.1", "tailwindcss": "^2.2.7", "ts-jest": "^27.0.7", "tsconfig-paths-webpack-plugin": "^3.5.1", "typescript": "^4.3.5", "webpack": "^5.51.1" }, "browser": { "fs": false } }

[sonjoydatta]

You're using so many packages in your project that could be the reason for taking a huge RAM.
In another way, I can see you using a custom webpack on your project, there can be something what's making circular dependency while you build your project. Remove unused packages and check your custom webpack configuration again.

[jabbas-alabz]

I dockerized my react application earlier and my environment variables were being pulled on runtime from the AWS secret manager, hence updating the build script in my package.json file worked for me.

"build": "GENERATE_SOURCEMAP=false react-scripts build"

I'm using react-scripts v4.0.1

[jgautsch]

I spent a while banging my head against this, lamenting the hellscape that javascript has become (JavaScript heap out of memory with 128gb wtf...)

In my case, deleting each .turbo cache dir and each .next build dir resulted in being able to build again without the error.

I'll continue sacrificing small animals to the javascript gods in the hopes of improving my and your fortunes. Sharp knives with sharp handles smh

[anasmohammed361]

still didn't work for me , i deleted the node_modules folder along side .next and .turbo , and ran pnpm i again , that worked for me

[anasmohammed361]

still started facing the same issues , after few hours finally figured out the culprit,

{
  "extends": ["@hobbyfi/eslint-config/next.js", "next/core-web-vitals"],
  "parser": "@typescript-eslint/parser"
  // "parserOptions": {
  //   "project": ["./tsconfig.json"]
  // }
}

commenting out the parserOptions solved the issue for me ,

[AbhinasRegmi]

Mine crashed too. I deleted the .next folder killed the terminal and restarted the server again. It woked for me.

[AmazingTurtle]

I've seen that in both dev and in a production build recently since the app dir was introduced, across multiple projects. What's more frightening, is that the dev server refuses to terminate in dev and keeps on allocating memory even faster when you try to CTRL+C it :D I frequently have to kill that using task manager or kill command (seeing this on both windows and linux).

[devdogfish]

I had the same bug and after hours of bashing my head against the wall found the error in my code. It was an infinite loop caused by a mistake in the JWT tokens and authentication flow, where a condition triggered the token function to repeat endlessly, eventually consuming all the memory.

That is why increasing memory, deleting modules and cache and reinstalling everything also did not work.

The cause might be different for those reading, but just a tip: check your code for infinite loops.