16

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",
Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Davis Jones
  • 1,504
  • 3
  • 17
  • 25
  • 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. – Jorge Fuentes González Sep 16 '20 at 15:12

4 Answers4

15

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",
David Bradshaw
  • 11,859
  • 3
  • 41
  • 70
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 !

stefbach
  • 151
  • 4
2

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/
Ken Lee
  • 119
  • 1
  • 2
1
  1. Delete the .next folder
  2. Run npm run dev

Issue fixed.

Swapnil Srivastava
  • 34
  • 3
  • 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](/help/how-to-answer). – Community Aug 21 '22 at 21:38