【Nuxt.js】新規作成時Babelで大量のWARNが出てくるときの解消法

新しくNuxt.jsのversion 2.14.6でプロジェクトを立ち上げようとし、yarn create nuxt-app <project-naem>し、
インストール完了後、yarn devで立ち上げたらコチラのWARNが大量に発生しました。

WARN  Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding        ["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.

WARNの内容を読んで見る

とりあえず翻訳してみる。

babel/preset-env 設定で "loose" オプションが "false" に設定されていますが、@babel/plugin-proposal-class-properties の "loose" モードオプションが "true" に設定されているため、@babel/plugin-proposal-private-methods では使用されません。 babel/plugin-proposal-class-properties、@babel/plugin-proposal-private-methods、および @babel/plugin-proposal-private-property-in-object (それらが有効な場合) では、"loose" オプションは同じでなければなりません。
をBabel設定の "plugins "セクションに追加してください。

Babelに何か関係がありそうです。
"loose" オプションが "false" に設定されているから"true"にしてくださいのような感じで書かれています。

nuxt.config.jsに記入する

Babelの設定を変えるには公式サイトに書いてあります。
https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-build/#presets
これを参考に対応してみます。

nuxt.config.js

  build: {
    babel: {
      presets({ isServer }, [preset, options]) {
        options.loose = true
      },
    },
  },

build内にbabelの設定をします。optionに先程のwarnの内容のlooseをtrueに設定します。
再度yarn devすると、warnが消えました。

eslintでエラー

warnは消えたのですが、eslintを入れているとソース上にエラーが出てきます。

エラー内容を読んで見るとこのような内容が出てきます。
isServerやpresetを何も宣言してないので不要ですね。

var isServer: any
'isServer' が宣言されていますが、その値が読み取られることはありません。ts(6133)
'isServer' is defined but never used. Allowed unused args must match /^_/u.eslint@typescript-eslint/no-unused-vars)

@babel/plugin-proposal-private-methodsの設定で対応する

@babel/plugin-proposal-private-methodsのlooseオプションをtrueにするだけなのでこちらに書き換えてみました。

nuxt.config.js

  build: {
    babel: {
      plugins: [['@babel/plugin-proposal-private-methods', { loose: true }]],
    },
  },

これでWARNもソース内のエラー両方消えました。

Nuxtの2.14.6のバージョンを新規でインストールしたときにbabelのloose optionがwarnになるようですね。
2.14.6以降で新規に作成するときは参考にしてみてください。