Webpack Configuration Error - please help me correct

Question

repo: https://github.com/BraveNewWorld99/reactbootstrap

I'm on webpack 5.15.0

I run "node index.js" in powershell and get the following error message:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

configuration.module.rules[0] should be one of these: ["..." | object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }, ...] -> A rule. Details: configuration.module.rules[0].loader should be a non-empty string. -> A loader request.

Here is my webpack.config.js

    module.exports = {
  entry: [
    './main.js',
  ],
  output: {
    path: '/',
    filename: 'main-bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {loader: ['babel-loader']}
      },
      { test: /\.css$/, use: {loader: 'style-loader!css-loader' }},
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: {loader: 'file-loader' }},
      {
        test: /\.(woff|woff2)$/,
        use: {loader: 'url-loader',
        options: {
          prefix: 'font/',
          limit: '5000',
        }}
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: {loader: 'url-loader',
        options: {
          limit: 10000,
          mimetype: 'application/octet-stream',
        }}
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: {loader: 'url-loader',
        options: {
          limit: '10000',
          mimetype: 'image/svg+xml',
        }}
      },
    ],
  },
};

Answer 1

Your first rule is wrongly defined. You've set an array, instead of a string on configuration. Try: loader: 'babel-loader' .

  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: {loader: 'babel-loader'}
  },