Handlebars Loader with Webpack 4

Question

I have been looking at examples of how to use the handlebars-loader with webpack but none seem to be working 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 in node_modeules/handlerbars-loader/index.js, the offending function is this

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 greatly appreciate it. I've been searching for hours for a solution and have tried lots to things but am not getting anywhere.

Answer 1

In Webpack 4 loaderContext.options has been replaced with loaderContext.rootConfig.

This commit has already been made to the handlebars-loader package to make it compatible with Webpack 4 however this has not been released yet.

For the time being I have uninstalled handlebars-loader and am using this fork.

The following steps have solved my problem:

Run these two commands.
npm uninstall handlebars-loader
npm install @icetee/handlebars-loader

In webpack.config.js, replace

loader: "handlebars-loader"

with

loader: "@icetee/handlebars-loader"

Answer 2

Also in the midst of upgrading an old webpack 4...

Apparently, it used to be possible to set custom properties on the config. That is there where it is looking for the handlebarsLoader.

It emits this error when you do set a handleBarLoader property on it.

For loader options: webpack 2 no longer allows custom properties in configuration.

Loaders should be updated to allow passing options via loader options in module.rules.

Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:

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

In my case, set it like this for now:

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