Nuxt.js 2.x + TypeScript 4.x その0005 ビルド時にJavaScript heap out of memoryなってしまう問題の解決

参考にさせていただいたページ

JavaScript heap out of memoryになってしまう原因は色々なものがあると思います。

結局凡ミスだったのですが、今回の私の例について紹介します。

example.vueで以下のように、HogeとFooという2つのコンポーネントをimportしていました。

import Hoge from '~/components/common/hoge/index.vue'
import Foo from '~/components/common/foo/index.vue'

hoge/index.vueの方には以下のように、name: 'Hoge' を設定していました。これは意図したものです。

export default Vue.extend({
  name: 'Hoge',
  〜略〜
})

foo/index.vueの方にも以下のように、name: 'Hoge' を設定してしまっていました。これは意図しないものです。

export default Vue.extend({
  name: 'Hoge',
  〜略〜
})

コンストラクタ名が重複することによって、ビルド時に問題が起こっていました。

こんなミスとは気づかず、しばらく「JavaScript heap out of memory」とかでWeb検索してハマっていました...。

foo/index.vueの方のnameを以下のように、name: 'Foo' とすることで「JavaScript heap out of memory」の問題が解決されました。

export default Vue.extend({
  name: 'Foo',
  〜略〜
})

タイミングとしては、test実行時、eslint実行時、ビルド実行時など色々なタイミングでメモリ不足になっているようです。

冒頭に書いたように、様々な理由でメモリ不足が起こるのですが、今回のことでいくつかの対応方法を試しました。
メモリ不足になる原因によっては以下の対応によって問題に対処できるかもしれません。

例えば yarn dev コマンドで開発サーバーを起動させていたときに「JavaScript heap out of memory」になった場合についてです。

まずnuxt.config.jsのtypescript.memoryLimitを設定します。

  typescript: {
    typeCheck: {
      typescript: {
        memoryLimit: 8192, // ここ
      },
    },
  },

そのうえで、package.jsonのscriptsを以下のように変更します。

"dev": "NODE_OPTIONS='--max-old-space-size=8192' nuxt-ts",

これで、改めて yarn dev すると今度はメモリ不足にはならないかもしれません。

メモリの値はご自身の端末で割り当て可能な値を適度に設定してみてください。

eslintの実行時にメモリ不足になる場合は、eslintの対象範囲を絞ることで問題が解決するかもしれません。

例えばnuxt.config.jsの以下のようになっている箇所を

  typescript: {
    typeCheck: {
      eslint: {
        files: './**/*.{ts,js,vue}',
      },
    },
  },

以下のように変更したり、

  typescript: {
    typeCheck: {
      eslint: {
        files: './src/**/*.{ts,js,vue}',
      },
    },
  },

.eslintrc.jsのignorePatternsの設定を以下のように変更するなどで問題が解決するかもしれません。

  ignorePatterns: [
    './node_modules/',
    '.nuxt/',
  ],

これは、.eslintignoreファイルを作成することでも同じ効果が得られます。

「revert: revert node-externals disabling in dev mode by clarkdo · Pull Request #5452 · nuxt/nuxt.js · GitHub」に書いてあって、効果がよくわかっていないのですが、一応これも貼っておきます。

nuxt.config.jsのstandaloneの項目を以下の通り変更するようです。

  build: {
    standalone: true,
  },