22

We're having a problem with the development environment of our Next.js app.

Problem

Our Javascript heap is constantly running out of memory. Here are the specific error logs:

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: 0x10003ae75 node::Abort() [/usr/local/bin/node]
 2: 0x10003b07f node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0x1001a7ae5 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0x100572ef2 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 5: 0x10057c3f4 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
 6: 0x10054e1e4 v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [/usr/local/bin/node]
 7: 0x10067fd99 v8::internal::String::SlowFlatten(v8::internal::Handle<v8::internal::ConsString>, v8::internal::PretenureFlag) [/usr/local/bin/node]
 8: 0x1001c587d v8::String::Utf8Length() const [/usr/local/bin/node]
 9: 0x10004e7b6 node::Buffer::(anonymous namespace)::ByteLengthUtf8(v8::FunctionCallbackInfo<v8::Value> const&) [/usr/local/bin/node]
10: 0x2b9f4f0078a1 
Abort trap: 6

Specifically: I've noticed questions that are somewhat similar, but when we try to run Node commands like this one: node --max_old_space_size=4096 node_modules/.bin/react-scripts start (a solution proposed elsewhere), which should allocate more memory to Node, we run into a problem. It seems that this will allocate extra memory to certain functions (and I've also seen this approach when allocating more memory to a specific file) but I'm not certain how to do that when you're running a command like npm run dev to start your development server.

Got any ideas?

Core Parts of Our Tech Stack

  • "@material-ui/core": "^4.0.0-alpha.8",
  • "@stripe/react-stripe-js": "^1.1.2",
  • "cors": "^2.8.5",
  • "firebase": "^7.14.4",
  • "next": "^9.5.2",
  • "react": "^16.8.6",
  • "react-query": "^2.12.1",
Improve this question
1
  • 3
    I don't know your app background nor your server stats, but my idea is that you better locate your memory leak. Probably a cyclic reference (a component inside the same component). Infinite RAM do not exists and you can't increase memory forever, so it will crash again. Commented Sep 16, 2020 at 15:12

5 Answers 5

Reset to default
21
+50

Running npm run dev just calls the dev script in your package.json file.

It should look like this:

"dev": "next",

You can can add any flags you wish to send to node, for example:

"dev": "NODE_OPTIONS=\"--max-old-space-size=4096\" next",
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This isn't working, David. FYI I'm getting error Unknown or unexpected option: --max_old_space_size
You should probably use "NODE_OPTIONS=--max-old-space-size=4096 next" as the --max_old_space_size is a node option and not a next option. See nodejs.org/api/cli.html#cli_node_options_options
Yep... this is the syntax that ended up working well, @stefbach "dev": "NODE_OPTIONS=\"--max_old_space_size=4096\" next",
Does this have any side effect on performance?
The effect on perf will depend on how much RAM you have and how big you make the cache.
4

I encounter a similar issue recently and it was due to VS code automatically importing a log method from an existing npm module. It was both crashing the next server (dev mode) and also the storybook CLI. Stack trace did not help and it was quite hard to catch.

It's not the first time I've had this problem even without VS code. Based on my experience, I would advise to check your imports. You could also have a circular dependency.

If the next build commands passes then you should check any dev dependencies import.

Good luck !

Improve this answer

Comments

3

I have similar situation many time. The majority of those solve by check circular dependency when I try to use index.ts to simple the imports.

Use madge saved me.

npm -g install madge
npx madge -s -c --extensions ts,tsx ./src/
Improve this answer

Comments

1

I got this error when I tired to build a Next.js 13.4.9 project on a VPS using $ npm run build

I followed these steps:

  • Try building in local machine to see if same error comes (but didn't): $ npm run build
  • Removed .next folder if already available and build again: $ rm -rf .next
  • Tried (didn't work): $ NODE_OPTIONS="--max-old-space-size=4096" npm run build
  • Tried (didn't work) adding the following to my next.config.js and build again: experimental: { esmExternals: false, }
  • Tried (worked) moving the already built local build folder to VPS and run: $ npm start and access it using http://your-domain.com

It was a work around for me. But I still get the error if I try to build in the VPS.

Improve this answer

Comments

0
  1. Delete the .next folder
  2. Run npm run dev

Issue fixed.

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.