以前に作った 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 をインストールしなければならなかったようです…！
エラーメッセージわかりにくいよ…！
で、上記のコマンドでライブラリのインストールが完了したら、.babelrc の presets の項目を下記のように変更します。
"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.」エラーが発生する時の対処法でした。
