【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