🤔

Nuxt.jsで新規プロジェクト作成した時にWARNが出たときの解決方法

2021/05/08に公開

Nuxt

tech

久しぶりにNuxt.jsで新規プロジェクトを作成してnpm run devをしたら大量のWARNが出てきたのでメモ程度に書き残します。

環境

Nuxt: ^2.15.4
create-nuxt-app/3.6.0 darwin-x64 node-v12.16.3

npx create-nuxt-app my-appとかで新規プロジェクトを作成します。
作成されてnpm run 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なのでtrueにしなさいと言っています。このpreset-envのlooseはデフォルトでfalseになっているみたいです。

looseオプションがtrueであることを明示的に示すことが必要なので、nuxt.config.jsに記入します。

nuxt.config.js

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

これでWARNは表示されなくなりました🎉

最後に

GitHubでissueがあがっていました。

環境

解決

最後に

Discussion