🤔

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

2021/05/08に公開

久しぶりに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になっているみたいです。

https://babel.dev/docs/en/babel-preset-env#loose

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

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

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

最後に

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

https://github.com/nuxt/nuxt.js/issues/9224

Discussion

ログインするとコメントできます