Custom helper with handlebars-loader

Question

I'm using this handlebars-loader for webpack 4. Now I wanted to use a custom helper, but i only get this error

ERROR in Template execution failed: TypeError: __default(...).call is not a function

ERROR in TypeError: __default(...).call is not a function

this is my webpack.config

//handlebars-loader
{
  test: /\.(hbs)$/,
  loader: "handlebars-loader",
  options: {
    helperDirs: [path.join(__dirname, './src/hbs/helpers')],
    partialDirs: [path.join(__dirname, './src/hbs/partials')]
  },
}

and this is my simple helper

const Handlebars = require('handlebars');
Handlebars.registerHelper('repeat', function(n) {
  console.log(n);
});

and how I use it

{{#repeat 10}}
    <span> repeat</span>
{{/repeat}}

Does anyone know what I'm doing wrong?

I've been wrestling with this for a little while now, I think its a bug with the loader in webpack 4. Did you manage to find a solution? — Andrew Lewis, Aug 15 '18 at 01:44
looking at using this approach - could you tell me nam of the helper file ? Or does it matter as you seem to reference the whole helpers directory? thanks. — v3nt, Nov 03 '20 at 17:20

score 4 · Answer 1 · answered Aug 15 '18 at 05:09

4

I found a solution. I have to export the helper as a module, then it works.

//repeat.js
module.exports = function(times, options) {
    console.log(times);
};

answered Aug 15 '18 at 05:09

Gregor Voinov

2,203
7
34
52

How do I use "Handlebars" variable within this file. It gives me an error when I try to import it. – Sachin Singh Feb 13 '19 at 09:52

Sideshowlol · Answer 2 · 2020-07-21T23:48:01.803

Thank you, Gregor! This has been frustrating me all day!

I had a simple function in a helper file, checkActive.js :

const Handlebars = require("handlebars")

Handlebars.registerHelper("checkActive", function (pageName, linkedPageName) {
  return pageName === linkedPageName ? "active" : ""
})

This would not work and gave me this error:

ERROR in Template execution failed: TypeError: __default(...).call is not a function

ERROR in   TypeError: __default(...).call is not a function

I found your solution and tried it. Lo-and-behold it worked! This is what I am now using instead:

module.exports = function (pagename, linkedPageName) {
  return pagename === linkedPageName ? "active" : ""
  console.log(pagename)
};

In order for this to work, you need to have the function saved in a file with the same name as the handlebars helper function you are calling, ie. in my case: checkActive.js

Custom helper with handlebars-loader

2 Answers2