TypeError: Cannot read property 'lessLoader' of undefined

[NitroCao]

node version: v11.10.1 package.json:

{
  "name": "hellowebpack",
  "version": "1.0.0",
  "description": "Learn how to use Webpack",
  "main": "main.js",
  "scripts": {
    "start": "webpack",
    "dev": "webpack-dev-server"
  },
  "author": "JayceCao",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "font-awesome": "^4.7.0",
    "font-awesome-webpack": "^0.0.5-beta.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "2.3.1",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.3.1",
    "popper.js": "1.14.7"
  }
}

webpack.config.js:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + '/app/main.js',
    mode: 'development',
    output: {
        path: __dirname + '/public',
        filename: 'bundle.js'
    },

    devServer: {
        host: '0.0.0.0',
        contentBase: './public',
        historyApiFallback: true,
        inline: true
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['less-loader']
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: ['url-loader?limit=10000&mimetype=application/font-woff']
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: ['file-loader']
            }
        ]
    },

    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default']
        }),
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.tmpl.html'
        })
    ],
}

When executing yarn run dev:

yarn run v1.13.0
$ webpack-dev-server
ℹ ｢wds｣: Project is running at http://0.0.0.0:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./public
ℹ ｢wds｣: 404s will fallback to /index.html
✖ ｢wdm｣: Hash: 4278c73b73aacf87d1fe
Version: webpack 4.29.6
Time: 1628ms
Built at: 03/03/2019 5:01:47 PM
     Asset      Size  Chunks             Chunk Names
 bundle.js  2.61 MiB    main  [emitted]  main
index.html  1.21 KiB          [emitted]
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./app/main.js 40 bytes {main} [built]
[./app/main.js] 99 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/bootstrap/dist/css/bootstrap.min.css] 1.05 KiB {main} [built]
[./node_modules/bootstrap/dist/js/bootstrap.js] 129 KiB {main} [built]
[./node_modules/font-awesome-webpack/index.js] 105 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:8080] (webpack)-dev-server/client?http://0.0.0.0:8080 8.1 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
    + 23 hidden modules

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/xxxxxx/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_modules/font-awesome-webpack/index.js
 @ ./app/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./app/main.js
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./app/index.tmpl.html] 1.38 KiB {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Failed to compile.
^C

[KeonaHu]

I have the same problem as you

[zhouzhongyuan]

How to resolve it?

[realworldweb]

The issue seems to be in the module dependent. So you need to check the package. Json in the actual node module eg in the node_module/webpack... there the dependence lists less loader a 2.4 or something. Edit this to same version as in your root package.json which is 4. Something. Then run npm update and see what happens. Could be that the dependent version is deprecated.