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

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: {}
         }
       })
     ]