環境
仮想環境のOS:Ubuntu
webpack 4.19.1
エラー内容
ERROR in ./src/main.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 /home/vagrant/React_study/React入門/Reactのツールで自動ビルド/hello/node_modules/babel-preset-es2015/lib/index.js
at createDescriptor (/home/vagrant/React_study/React入門/Reactのツールで自動ビルド/hello/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
エラーが出てしまうファイル
エラーが出るwebpack設定ファイルです
module.exports = {
entry: './src/main.js',
output: {
filename: './src/out/bundle.js'
},
module: {
rules: [
{
test: /.js$/,
loader: 'babel-loader',
options: {
presets:['es2015', 'react']
}
}
]
}
};
test:ではjsファイルを指定。optionsでは、babel-loaderのオプションとしてes2015とreactを指定しReact/JSX変換を行う。
しかし、エラーが出てしまう。es2015古いんかなぁ、、、
解決方法 :
調べてみると、足りないパッケージをインストールする必要があるようだ。
npm i @babel/preset-env
インストールが始まった。
そして、上の方に書いたwebpackの設定ファイルを修正した。
['es2015','react']から、['@babel/env', '@babel/react']に修正した
module.exports = {
entry: './src/main.js',
output: {
filename: './src/out/bundle.js'
},
module: {
rules: [
{
test: /.js$/,
loader: 'babel-loader',
options: {
presets:['@babel/env', '@babel/react'] //['es2015','react']から変更
}
}
]
}
};
結果 :
無事に、一つのファイルとして生成されたファイルが生成された