How to Allocate More Memory to Javascript Heap Using Next.js

Question

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",

Answer 1

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",