npm run build 大量のerrorが出てきた

Question

前提・実現したいこと

初めてJavaScriptに触れる学生です.
https://qiita.com/EZ_Denta/items/9e6a47f330b5a01806ae
こちらを参考にして動かしていたのですがうまくいかず. package.jsonにbuiltも入れたはずなのですが大量のerrorが出てどこから手をつければいいかわからない状態になっています.

発生している問題・エラーメッセージ

> react_drill@1.0.0 build /Users/yamaguchishuuhei/react_drill
> webpack

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[1] should be one of these:
   ["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
   -> A rule.
   Details:
    * configuration.module.rules[1].loader should be a non-empty string.
      -> A loader request.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react_drill@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the react_drill@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yamaguchishuuhei/.npm/_logs/2021-08-28T17_30_34_922Z-debug.log

package.json

{
  "name": "react_drill",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "repository": {
    "type": "git",
   以下省略

webpack.config.js

module.exports = {
    entry: {
      app: "./src/index.js"
    },
    output: {
      path: __dirname + '/public/js',
      filename: "[name].js"
    },
      devServer: {
      contentBase: __dirname + '/public',
      port: 8080,
      publicPath: '/js/'
    },
    devtool: "eval-source-map",
    mode: 'development',
    module: {
      rules: [{
        test: /.js$/,
        enforce: "pre",
        exclude: /node_modules/,
        loader: "eslint-loader"
      }, {
        test: /.css$/,
        loader: ["style-loader","css-loader"]
      }, {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
       }]
    }
  };

Comments

[mather]

提示されたものにはそもそも module.rules が存在しませんので、おそらくエラーが出たときのものとは異なる webpack.config.js を提示していますよね。
現在の状態のファイルを提示し、その状態のコードで実行したときのエラーを示してください。

[退会済みユーザー]

一つ前に試したものを貼り付けていました. 申し訳ないです. 訂正しました

Answer 1

エラーメッセージをよく読みましょう。この部分が大事です。

configuration.module.rules[1].loader should be a non-empty string.

現在の module.rules[1].loader はこのようになっています。

loader: ["style-loader","css-loader"]

これは配列なので non-empty string ではないですよね？

Comments

[退会済みユーザー]

loader: ["style-loader","css-loader"]
を
use: ["style-loader","css-loader"]
と書き換えたら無事動きました!ありがとうございます!