浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React】「Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions.」エラーの対処法

以前に作った Cordova + React のプロジェクトに、react-leaflet ライブラリをインストールしたら遭遇したエラーです。
ライブラリをインストール後に npm run build を実行したところ、下記のようなエラーが発生しました。

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions.

全文は長すぎるので、最初の2行分くらいを抜粋しました。

表示されたメッセージによると node_modules\babel-preset-react\lib\index.js 内でエラーが発生しているようなので、npm を使って babel-preset-react を再インストールし、更新しましたがエラーは解消できず…。

 

で、エラーメッセージを検索した結果、こちらの記事が大変参考になりました。

【React】Error: Plugin/Preset files are not allowed to export objects, only functions. が吐き出される – Laravelとねころっけくん5.8
https://nekorokkekun.hatenablog.com/entry/2019/09/06/093711

こちらによると、下記コマンドで不足しているライブラリをインストールする必要があるとのことでした。

npm install --save-dev @babel/preset-react

エラーメッセージに babel-preset-react とあったので、必死にこちらをインストールしていたのですが…正しくは @babel/preset-react をインストールしなければならなかったようです…!
エラーメッセージわかりにくいよ…!

で、上記のコマンドでライブラリのインストールが完了したら、.babelrcpresets の項目を下記のように変更します。

"presets": [
  [
    "@babel/preset-env",
    {
      "targets": {
        "node": true
      }
    },
  ],
  "@babel/preset-react",
],

参考サイトでは、"presets": ["@babel/preset-env", "@babel/preset-react"], に変更する、となっていましたが、私の環境では別のエラーの対処のために上記のように変更しました。

上記の変更をした後、再度ビルドしたところ、無事 npm run build が通りました…!

 

以上、npm run build を実行時に、「Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions.」エラーが発生する時の対処法でした。

  • この記事いいね! (0)