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.

I used to think the striking new feature about webpack 4 would be that it is zero conf? — connexo, Mar 01 '18 at 18:45
If my answer resolved your question, can you select the check mark to mark it as the answer for the question? Thank you. — Clay, Mar 07 '18 at 21:14
@Clay Thank you for your help! I actually already found a solution just before I saw your answer but have only just had time to post my own answer. Hopefully both our answers will be helpful to others :) — Redtama, Mar 20 '18 at 17:48

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

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

score 2 · Accepted Answer · answered Mar 20 '18 at 17:46

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"

Handlebars Loader with Webpack 4

2 Answers2

The following steps have solved my problem: