【ReactJS】Webpackでエラー「configuration.module has an unknown property 'loaders'」が発生した場合の対処方法

2024-04-10

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/,
  },
];

その他の解決策

webpack パッケージを最新バージョンにアップデートする。
.babelrc ファイルを作成し、presets オプションに react と env を設定する。

補足

module.rules プロパティは、複数のルールを設定することができます。
各ルールには、test プロパティ、loader プロパティ、exclude プロパティなどを設定することができます。
test プロパティは、どのファイルにルールを適用するかを指定します。
loader プロパティは、ファイルの変換に使用するローダーを指定します。
exclude プロパティは、ルールを適用しないファイルのパスを指定します。

index.html

<!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 ファイルを開くと、シンプルなコンポーネントが表示されます。

補足

このサンプルコードでは、babel-loader を使用して、JSX を JavaScript に変換しています。
webpack.config.js ファイルは、Webpack の設定ファイルです。
entry プロパティは、Webpack が処理するエントリファイルのパスを指定します。
module プロパティは、Webpack が使用するローダーの設定を指定します。

configuration.module has an unknown property 'loaders' エラーを解決する他の方法

webpack パッケージを最新バージョンにアップデートする

古いバージョンの webpack パッケージでは、module.loaders プロパティがまだ有効だった可能性があります。webpack パッケージを最新バージョンにアップデートすることで、module.loaders プロパティが非推奨であることについての警告が表示されるようになります。

babel-loader パッケージを最新バージョンにアップデートする

.babelrc ファイルを作成し、presets オプションに react と env を設定することで、babel-loader が module.rules プロパティと互換性のある設定で実行されます。

{
  "presets": [
    "react",
    "env"
  ]
}

--config オプションを使用して別の設定ファイルを使用する

webpack コマンドを実行する際に、--config オプションを使用して別の設定ファイルを使用することができます。別の設定ファイルで module.rules プロパティを使用している場合は、この方法でエラーを解決することができます。

webpack --config webpack.config.other.js

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;