Webpack installation less error

my less dependency is installed when I configure react with webpack4.
this is webpack.config.js

  use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: "../"
        }
      },
      { loader: "css-loader"},
      { loader: "style-loader" },
      { loader: "postcss-loader", options: { plugins: () => [autoprefixer()] } }
    ]

I don"t know why I reported an error, but I couldn"t find a solution after looking for it for a long time

ERROR in ./src/pages/home/home.less (./node_modules/css-loader/dist/cjs.js!./node_modules/style-loader!./node_modules/postcss-loader/src??ref--4-3!./src/pages/home/home.less)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../../node_modules/postcss-loader/src/index.js??ref--4-3!./home.less");
    | ^
  3 |
  4 | if(typeof content === "string") content = [[module.id, content, ""]];

but when I put

      { loader: "style-loader" },
      { loader: "postcss-loader", options: { plugins: () => [autoprefixer()] } }

commented out there are no errors reported

{ test: /\.(css|less)$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', { loader: 'less-loader', options: { javascriptEnabled: true, }, }, ], }