npm run dev 할 때 에러발생

에러메세지:

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

- configuration.module.rules[0] has an unknown property 'mode'. These properties are valid:

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 description with conditions and effects for modules.

webpack.config.js 파일 코드

const path = require("path"); //path: 노드에서 경로 조작하는 것을 쉽게 해준다.
const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module.exports = {
  name: "wordrelay",
  mode: "development", // 실서비스: production
  devtool: "eval", // 실서비스: hidden-source-map
  resolve: {
    extensions: [".js", ".jsx"], //이렇게 적으면 웹펙이 알아서 js나 jsx가 있는지 확인을 하고, react-react-to-dom-word-relay 이거 찾아서 app.js로 만들어준다.
  },

  // 입력
  entry: {
    app: ["./client"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/, //정규표현식: JS랑 JSX 파일에 룰을 적용하겠다.
        loader: "babel-loader",
        mode: "development",
        options: {
          //babel-loader의 옵션
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  browsers: ["> 1% in KR"], // browserslist
                },
                debug: true,
              },
            ],
            "@babel/preset-react",
          ],
          plugins: [
            "@babel/plugin-proposal-class-properties",
            "react-refresh/babel",
          ],
        },
      },
    ],
  },
  plugins: [new RefreshWebpackPlugin()],

  //출력
  output: {

    path: path.join(__dirname, "dist"), //컴퓨터 마다 파일 경로가 다 다른데 현재폴더안에 자동으로 dist폴더를 만들어준다.
    filename: "app.js",
    publicPath: "/dist/",
  },
 
  
  devServer: {
    publicPath: '/dist/',
    hot: true,
    devMiddleware: { publicPath: "/dist" },
    static: { directory: path.resolve(__dirname) },
  },
  //터미널에 webpack쓰면 두 파일을 합쳐준다.
};

package.json 코드

{
  "name": "lecture",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development",
    "dev": "webpack serve --env development",
    "assets": "webpack --config webpack.config.js --mode development"
  },
  "author": "tk",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.24.0",
    "@babel/preset-env": "^7.24.0",
    "@babel/node": "^7.23.9",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
    "react-refresh": "^0.14.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^7.23.9",
    "webpack-dev-server": "^5.0.3"
  },
  "dependencies": {
    "babel-loader": "^9.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

호환문제인 것같은데 어떤 부분이 호환문제가 생기는건지 잘 모르겠습니다.