🪛

Next.js v12.0.0で「heap out of memory」が発生したときの回避法

2021/10/27に公開

Next.jsのv12がリリースされたので、試しにバージョンアップして、next devをすると以下のようなエラーが発生。
NODE_OPTIONSmax-old-space-sizeを変更してみても改善されませんでした。

<--- Last few GCs --->

[3344:0x118008000]    36324 ms: Mark-sweep (reduce) 2045.4 (2051.5) -> 2044.7 (2052.3) MB, 5051.5 / 0.1 ms  (average mu = 0.042, current mu = 0.001) allocation failure scavenge might not succeed


<--- JS stacktrace --->

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

...

回避法

リリース後早々にissueが上がっており、回避法も上がっていたのでシェアします。
どうやらChakra UIを利用していると影響が出るみたいです。(自分の環境でもChakra UIを利用していました)

https://github.com/vercel/next.js/issues/30330

next.config.jsに以下を追記する

next.config.js
module.exports = {
  experimental: {
    esmExternals: false
  }
}

再度、next devをすると無事localhostに接続できました!

参照

https://github.com/vercel/next.js/issues/30330#issuecomment-952172377

GitHubで編集を提案

Discussion