こんにちは、普段railsとvue.jsでインターンをしている私文大学生のkomiyaです。

nuxtを用いて個人的なプロジェクトを開発している際、devモードで
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
というエラーに悩まれたのでその解決策を書きます。

エラー発生の原因と解決法

このエラーは、ログイン機能を追加するためにnuxtjs/authを使用したした際に発生しました。apiサーバーをlocalhostの3000番ポートで立ち上げていたので、axiosのbaseURLをlocalhost:3000に設定したのですがこれが良くなかったようです。nuxtのdevサーバーのデファルトのポート番号が3000なので、この設定だとauthモジュールがuser情報を取得する際、nuxt自身にリクエストを飛ばしてループ状態に陥ってしまうのがこのエラーの原因のようでした。
なので、apiサーバーは8080ポート、nuxtを3000ポートで立ち上げ直し(私の場合はdockerを使っていたのでdocker-compose.ymlを修正）、axiosのbaseURLをlocalhost:8080に変えたら解決しました。

nuxt.config.json

  axios: {
    host: 'localhost',
    //apiサーバーを8080で立てて、ここを3000から8080に変更
    port: 8080,
 
  },
  auth: {
    redirect: {
      login: '/login',
      logout: '/login',
      callback: false,
      home: '/',
    },
    strategies: {
      local: {
        endpoints: {
          login: { url: 'api/users/sign_in', method: 'post',propertyName: 'token' },
//portを3000にするとこのuser取得の部分でエラーが発生する。
          user: {url: 'api/users/current', method: 'get',  propertyName: false},
          logout: false
        }
      }
    
  },