もやぶろ

moyashidaisukeのブログだからもやぶろ。フリーランスのエンジニアのダイスケです。プログラム関連とかギター関連とか旅行関連とか色々。

【JavaScript】babelで「Multiple configuration files found. Please remove one」エラー

事象

babelを使った環境でjsのコンパイル(ビルド、ホットリロード等なんでも)時に以下のエラーが発生する。

Error: Multiple configuration files found. Please remove one:
 - package.json#babel
 - .babelrc

何が起きているか

babelの設定ファイルの babelrc なのですが、実は他にpackage.jsonに書く方式、.babelrc.jsに書く方式があります。

babeljs.io

この3つのどれかを同時に使おうとすると、設定はマージされずにエラーになってしまうようです。

対応方法

前述の3のうち、どれにするか方針を決めて、それ以外を削除しましょう。(必要に応じて内容はマージ)

個人的にはコメントがかける.babelrc.jsがおすすめです。(package.jsonもコメントかけるようになってほしい、、、

.babelrc

  • 👌昔からあるものなので馴染み深い場合が多い
  • 中身はjson

package.json

  • 👌設定ファイルを増やさなくて良いので、ルートディレクトリがきれいになる
  • 中身はjson
  • 😣設定ファイルが誇大化しがち

.babelrc.js

  • 中身はJavaScript
    • 🥰なのでコメントもロジックもなんでもかける