5

I am using Handlebars in my project and bundling templates using webpack. I am using handlebars-loader to compile templates. I got issue when I created a small helper. Webpack shows this error when I use helper in my template:

You specified knownHelpersOnly, but used the unknown helper withCurrentItem - 5:4

This is my code:

Webapck:

{
        test   : /\.(tpl|hbs)$/,
        loader : "handlebars-loader?helperDirs[]=" + __dirname + "templates/helpers"
        // use    : 'handlebars-loader?helperDirs[]=false' + __dirname + 'templates/helpers'
},

Helper(project/templates/helpers/withCurrentItem.js):

export default function (context, options) {
  const contextWithCurrentItem = context

  contextWithCurrentItem.currentItem = options.hash.currentItem

  return options.fn(contextWithCurrentItem)
}

Template file(project/templates/products.tpl):

{{> partials/filters}}
<ul class="u-4-5">
  {{#each data.products}}
    {{> partials/product}}
    {{withCurrentItem ../styles currentItem=this}}
  {{/each}}
</ul>

I tried to resolve the problem and searched over the internet but I couldn't find any thing. This is what I have tried to:

  • Add helperDirs[] query param to loader as:

    loader : "handlebars-loader?helperDirs[]=" + __dirname + "templates/helpers"

  • Add helpers directory path to resolve.modules property of webpack config file

Sadly, none of them work.

Bharat Soni
  • 2,824
  • 6
  • 23
  • 48

3 Answers3

6

webpack@3.5.5 and handlebars-loader@1.5.0:

{
  test: /\.hbs$/,
  loader: 'handlebars-loader',
  options: {
    helperDirs: path.join(__dirname, 'path/to/helpers'),
    precompileOptions: {
      knownHelpersOnly: false,
    },
  },
},

Update 2021: also works with webpack@4+.

Attenzione
  • 833
  • 9
  • 12
  • 2
    Is there any way to register helpers without separate files for them in native hbs way (handlebars.registerhelper(args)) in webpack.config? Also how to register helpers from npm modules(handlebars-layouts, handlebars-helpers)? – malonowa Feb 22 '18 at 09:30
  • If you're using webpack, you should avoid using inline helper (native hbs registerHelper), it's inconsistent. For other question, try to use `config.helperResolver` configuration for `handlebars-loader` – Attenzione Apr 09 '18 at 11:16
6

For me, none of these approaches worked. I used runtime option to create my own instance of Handlebars (thanks to this comment):

webpack.config.js

module: {
  rules: [
    {
      test: /\.(handlebars|hbs)$/,
      loader: 'handlebars-loader',
      options: {
        runtime: path.resolve(__dirname, 'path/to/handlebars'),
      },
    },

path/to/handlebars.js

const Handlebars = require('handlebars/runtime');
Handlebars.registerHelper('loud', function(aString) {
  return aString.toUpperCase();
});
module.exports = Handlebars;
Vahid
  • 6,639
  • 5
  • 37
  • 61
1

Following config worked for me in webpack 4

// webpack
{
    test: /\.hbs$/,
    use: [{
        loader: 'handlebars-loader?runtime=handlebars/runtime',
        options: {
            precompileOptions: {
                knownHelpersOnly: false,
            }
        }
    }]
}


// helpers/ifEq.js
module.exports = function (a, b, opts) {
    if (a === b) {
        return opts.fn(this);
    }
    return opts.inverse(this);
}
Rakesh Rawat
  • 327
  • 3
  • 14