Steering Wheel Loader with Webpack 4

Question

I am looking at examples of using the helm loader with webpack, but none of them work with webpack 4.

Error

ERROR in ./src/templates/property-list-item.hbs Module build failed: TypeError: Cannot read property 'handlebarsLoader' of undefined at getLoaderConfig (/Users/Sam/Desktop/mettamware/Public/js/node_modules/handlebars-loader/index.js:24:37) at Object.module.exports (/Users/Sam/Desktop/mettamware/Public/js/node_modules/handlebars-loader/index.js:32:15) @ ./src/property-list.js 5:0-58 40:23-31 @ ./src/app.js

---

When I look node_modeules/handlerbars-loader/index.js, the disturbing function is

function getLoaderConfig(loaderContext) {
  var query = loaderUtils.getOptions(loaderContext) || {};
  var configKey = query.config || 'handlebarsLoader';
  var config = loaderContext.options[configKey] || {};
  delete query.config;
  return assign({}, config, query);
}

---

My webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.hbs$/,
        use: [{
          loader: "handlebars-loader",
          options: {
            helperDirs: path.resolve(__dirname, "./src/helpers")
          }
        }]
      }
    ]
  },
  node: {
    fs: 'empty'
  }
};

If anyone can help, I would really appreciate it. I searched for several hours to solve and tried many times, but I get nothing.

Answer 1

Webpack 4 has loaderContext.optionsbeen replaced by loaderContext.rootConfig.

This commit has already been added to the package handlebars-loaderto make it compatible with Webpack 4, however it has not yet been released.

I am currently uninstalling handlebars-loaderand using this plug .

The following steps solved my problem:

.
  npm uninstall handlebars-loader
  npm install @icetee/handlebars-loader

webpack.config.js

loader: "handlebars-loader"

loader: "@icetee/handlebars-loader"

Answer 2

- 4...

-, config. handlebarsLoader.

, handleBarLoader.

: webpack 2 .

, modules.rules.

, , LoaderOptionsPlugin :

     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           handlebarsLoader: ...
         }
       })
     ]

:

     plugins: [
       new webpack.LoaderOptionsPlugin({
         options: {
           handlebarsLoader: {}
         }
       })
     ]