Webpack4 less compiles Cannot read property 'lessLoader' of undefined

post the error message directly

ERROR in ./app/index.less (./node_modules/_css-loader@0.23.1@css-loader!./node_modules/_less-loader@2.2.3@less-loader!./app/index.less)
Module build failed: TypeError: Cannot read property "lessLoader" of undefined
    at Object.module.exports (E:\\web\Project\Study\react-music\node_modules\_less-loader@2.2.3@less-loader\index.js:50:18)
 @ ./app/index.less 4:14-150
 @ ./app/index.js

judging from the error message.. It is reported directly from less-loader that there is no situation that it is not installed.
less-loader can run, and there is no case that less is not installed.
I have tried that css can be parsed, and it is not a problem with style-loader, and css-loader.
it doesn"t make sense to read whether the column seen by reademe is written in webpack2 or 1.
is attached. I have to write it. At least I look right at first glance. Solve?

          {
            test: /\.less/,
            use: [
              { loader: "style-loader" },
              { loader: "css-loader" },
              { loader: "less-loader" }
            ]
          }

Webpack less react.js javascript

Mar.17,2021

is less-loader not upgraded

I also encounter this situation. I don't know how to solve

The less-loader requires less as peerDependency.. What about Thus you are able to control the versions accurately.

? I don't know

I also encountered this problem when I was using font-awesome-webpack in my project.

ERROR in ./node_modules/font-awesome-webpack/font-awesome.config.js (./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/font-awesome-webpack/node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js)
Module build failed (from ./node_modules/font-awesome-webpack/node_modules/less-loader/index.js):
TypeError: Cannot read property 'lessLoader' of undefined
    at Object.module.exports (/home/xxxxx/UNIX_Programming/nodejs/HelloWebpack/node_modules/font-awesome-webpack/node_modules/less-loader/index.js:50:18)
 @ ./node_modules/font-awesome-webpack/font-awesome.config.js (./node_modules/font-awesome-webpack/node_modules/style-loader!./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/font-awesome-webpack/node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js) 4:14-154

node version: v11.10.1
webpack version: 4.29.6

        File: node_modules/font-awesome-webpack/node_modules/less-loader/index.js

   1    "use strict";
   2    /*
   3        MIT License http://www.opensource.org/licenses/mit-license.php
   4        Authors
   5            Tobias Koppers @sokra
   6            Johannes Ewald @jhnns
   7    */
   8    var less = require("less");
   9    var fs = require("fs");
  10    var loaderUtils = require("loader-utils");
  11    var path = require("path");
  12    var util = require("util");
  13   
  14    var trailingSlash = /[\\\/]$/;
  15   
  16    module.exports = function(source) {
  17        var loaderContext = this;
  18        var query = loaderUtils.parseQuery(this.query);
  19        var cb = this.async();
  20        var isSync = typeof cb !== "function";
  21        var finalCb = cb || this.callback;
  22        var configKey = query.config || "lessLoader";
  23        var config = {
  24            filename: this.resource,
  25            paths: [],
  26            relativeUrls: true,
  27            compress: !!this.minimize
  28        };
  29        var webpackPlugin = {
  30            install: function(less, pluginManager) {
  31                var WebpackFileManager = getWebpackFileManager(less, loaderContext, query, isSync);
  32   
  33                pluginManager.addFileManager(new WebpackFileManager());
  34            },
  35            minVersion: [2, 1, 1]
  36        };
  37   
  38        this.cacheable && this.cacheable();
  39   
  40        Object.keys(query).forEach(function(attr) {
  41            config[attr] = query[attr];
  42        });
  43   
  44        // Now we're adding the webpack plugin, because there might have
  45        // been added some before via query-options.
  46        config.plugins = config.plugins || [];
  47        config.plugins.push(webpackPlugin);
  48   
  49        // If present, add custom LESS plugins.
  50        if (this.options[configKey]) {
  51            config.plugins = config.plugins.concat(this.options[configKey].lessPlugins || []);
  52        }
  53   
  54        // not using the `this.sourceMap` flag because css source maps are different
  55        // @see https://github.com/webpack/css-loader/pull/40
  56        if (query.sourceMap) {
  57            config.sourceMap = {
  58                outputSourceFiles: true
  59            };
  60        }
  61   
  62        less.render(source, config, function(e, result) {

Previous: There is a paragraph in the nail development document that introduces a method using script, but I don't know how to introduce it in ts.

Next: Crc32 module mapping to a machine, how to make a key plus some factors scattered to the machine?