Published on

BabelでPlugin/Presetのエラーが出たときの対応方法

Authors
  • avatar
    Name
    ssu
    Twitter

webpackでbabelを使う際に下記のようなエラーに遭遇しました。 主なエラーは、

Error: Plugin/Preset files are not allowed to export objects, only functions.

になります。これはbabelのバージョンの違い(babel 6とbabel 7)により生じるエラーです。

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 node_modules/babel-preset-react/lib/index.js at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:211:11) at createDescriptor.next (<anonymous>) at step (/node_modules/gensync/index.js:261:32) at node_modules/gensync/index.js:273:13 at async.call.result.err.err (node_modules/gensync/index.js:223:11)

そのため、新しいbabelに揃えるために、babelの一式のmoduleを消して、その後あたらしいものを入れます。 例えば、こんな感じで消して

yarn remove babel-core babel-loader babel-preset-env babel-preset-react

新しいのを入れます。

yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

そして、webpack.config.jsのpresetのところを変えます。 全体的には下記のようにwebpack.config.jsにしてあげます。

const path = require('path') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'public'), filename: 'bundle.js' }, module: { rules: [ { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: [ "@babel/preset-env", "@babel/preset-react" ] } }, exclude: /node_modules/ }, ] } }

参考: Preset files are not allowed to export objects