ReactのビルドでJavaScript heap out of memoryのエラー

VPS上でReactのビルド中にメモリ不足のエラーが発生しました。対処法のメモ記事です。

起こった問題

サーバー上で「Nginx + Reactプロジェクト」構成のDockerイメージをビルドしようとすると失敗。

Reactのyarn run buildのフェーズで以下のようなメモリ不足のエラーが出ました。

(react-scriptsのバージョンは"4.0.3")

<--- Last few GCs --->

[36:0x5f478e0]    44297 ms: Mark-sweep (reduce) 488.0 (492.9) -> 487.7 (494.1) MB, 777.3 / 0.0 ms  (average mu = 0.084, current mu = 0.002) allocation failure GC in old space requested
[36:0x5f478e0]    45063 ms: Mark-sweep (reduce) 488.2 (493.1) -> 488.0 (494.4) MB, 765.1 / 0.0 ms  (average mu = 0.044, current mu = 0.002) allocation failure GC in old space requested


<--- JS stacktrace --->

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

対処法

ソースマップを生成する過程でメモリ不足になることが原因のようです。そのためソースマップの生成自体をしないように変更します。

.env.productionに以下を記述します。

GENERATE_SOURCEMAP=false

.envファイルの優先度についてはこちらの記事から。

これでエラーを回避できますが、あくまで対症療法ですのであしからず。

参考：