webpack4 less编译 Cannot read property 'lessLoader' of undefined

Question

直接贴错误信息吧

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

从错误信息里看..是直接从less-loader里报出来的不存在没装的情况
less-loader能运行，也不存在less没装的情况
我试了下css可以解析，也不是style-loader,和css-loader的问题。
去翻reademe看到的列子是webpack2还是1的写法，没有意义...
附上我得写法..至少我一眼看上去是没错...求解？

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

Answer 1

less-loader是不是没有升级

Answer 2

我也碰到这种情况，不知怎么解决

Answer 3

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

Answer 4

同遇到此问题，我是在项目中使用 font-awesome-webpack 的时候遇到的。

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) {

Answer 5

怎么解决？我也不知道