【ReactJS】Webpackでエラー「configuration.module has an unknown property 'loaders'」が発生した場合の対処方法
ReactJSとWebpackで発生する「configuration.module has an unknown property 'loaders'」エラー
原因
Webpack v4 では、module.loaders プロパティは非推奨となり、代わりに module.rules プロパティを使用する必要があります。そのため、module.loaders を設定すると、上記のエラーが発生します。
解決方法
このエラーを解決するには、module.loaders プロパティを module.rules に置き換える必要があります。
例：
// 誤り
module.loaders = [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
];
// 正しい
module.rules = [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
];
.babelrcファイルを作成し、presetsオプションにreactとenvを設定する。babel-loaderパッケージを最新バージョンにアップデートする。
excludeプロパティは、ルールを適用しないファイルのパスを指定します。loaderプロパティは、ファイルの変換に使用するローダーを指定します。testプロパティは、どのファイルにルールを適用するかを指定します。- 各ルールには、
testプロパティ、loaderプロパティ、excludeプロパティなどを設定することができます。 module.rulesプロパティは、複数のルールを設定することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ReactJSとWebpackのサンプル</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
App.js
import React from 'react';
const App = () => {
return (
<div>
<h1>ReactJSとWebpackのサンプル</h1>
<p>これはシンプルなコンポーネントです。</p>
</div>
);
};
export default App;
webpack.config.js
const path = require('path');
module.exports = {
entry: './App.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
],
},
};
このコードを実行すると、dist ディレクトリに bundle.js ファイルが生成されます。ブラウザで index.html ファイルを開くと、シンプルなコンポーネントが表示されます。
moduleプロパティは、Webpack が使用するローダーの設定を指定します。outputプロパティは、Webpack が生成する出力ファイルのパスと名前を指定します。entryプロパティは、Webpack が処理するエントリファイルのパスを指定します。webpack.config.jsファイルは、Webpack の設定ファイルです。
configuration.module has an unknown property 'loaders' エラーを解決する他の方法
古いバージョンの webpack パッケージでは、module.loaders プロパティがまだ有効だった可能性があります。webpack パッケージを最新バージョンにアップデートすることで、module.loaders プロパティが非推奨であることについての警告が表示されるようになります。
古いバージョンの babel-loader パッケージでは、module.loaders プロパティと互換性がない可能性があります。babel-loader パッケージを最新バージョンにアップデートすることで、module.rules プロパティと互換性のあるバージョンになります。
.babelrc ファイルを作成し、presets オプションに react と env を設定することで、babel-loader が module.rules プロパティと互換性のある設定で実行されます。
{
"presets": [
"react",
"env"
]
}
--config オプションを使用して別の設定ファイルを使用する
webpack コマンドを実行する際に、--config オプションを使用して別の設定ファイルを使用することができます。別の設定ファイルで module.rules プロパティを使用している場合は、この方法でエラーを解決することができます。
webpack --config webpack.config.other.js
webpack-merge を使用して設定ファイルをマージする
webpack-merge を使用して、複数の設定ファイルをマージすることができます。複数の設定ファイルで module.loaders プロパティを使用している場合は、webpack-merge を使用してこれらの設定ファイルをマージし、module.rules プロパティを使用するようにすることができます。
const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = {
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
],
},
};
const devConfig = {
devtool: 'source-map',
};
const prodConfig = {
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
}),
],
};
const config = merge(commonConfig, devConfig);
module.exports = config;
module.loadersプロパティをmodule.rulesに置き換える
reactjs webpack
