【React】Error: Plugin/Preset files are not allowed to export objects, only functions. が吐き出される
webpack-dev-server起動時に以下のようなエラーが出てしまいました。
ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/morishimahiraku/my-app/node_modules/babel-preset-react/lib/index.js at createDescriptor (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:178:11) at items.map (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:109:50) at Array.map (<anonymous>) at createDescriptors (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:109:29) at createPresetDescriptors (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:101:10) at presets (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:47:19) at mergeChainOpts (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-chain.js:320:26) at /Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-chain.js:283:7 at buildRootChain (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-chain.js:120:22) at loadPrivatePartialConfig (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/partial.js:85:55)
色々と試してみたのですが、以下の手順で一定の解決となりました。
エラーログに表示されているパッケージをインストールする
エラーログにパッケージ名(babel-loaderなど)をインストールしていきます。
$ npm install --save-dev @babel/preset-react $ npm installD babel-loader @babel/core @babel/preset-env webpack
この辺りは自分の手違いで抜けていた部分なので、しっかりと手順通りに進めていけば必要のない工程かと思います。
.babelrcを編集
このように書いていた.babelrcを
{ "presets": [ "env", "react", ] }
以下のように書き換えました。
{ "presets": ["@babel/preset-env", "@babel/preset-react"], }
これで無事、npm run startができました。
参考:
github.com