I wonder how can i register handlebars-helpers dependency using handlebars-loader

[wckhg89]

I would like to know if there is a sample webpack configuration file using the handlebars-helpers dependency. (https://github.com/assemble/handlebars-helpers)

ps.

When I read the related issue(https://github.com/pcardune/handlebars-loader/issues/110), it seems to use the method to insert the dependency at runtime before precompile time. I wonder how the Handlebars-helper dependency is registered.

[EddyVinck]

I have been trying to figure this out for weeks but I cannot figure out how to register https://github.com/assemble/handlebars-helpers to precompile either.

I much prefer Handlebars to Pug, but I'm going to swap them because I need to make progress with my project. I'd like to see this problem solved though.

https://github.com/shannonmoeller/handlebars-layouts would also be nice to have.

@wckhg89 I suppose you haven't figured this out yet?

I thought I would be able to do it with helperResolver but that unfortunately needs the path to the helpers. I wanted to pass the helpers directly. Something like this:

const handlebarsHelpers = require('handlebars-helpers')();

// other config stuff...

{
      test: /\.hbs$/,
      loader: 'handlebars-loader',

      options: {
        inlineRequires: '/assets/img',
        precompileOptions: {
          knownHelpersOnly: false,
        },
        helpersDirs: ['src/views/helpers', './node_modules/handlebars-helpers/lib'],
        helperResolver(function(helper, callback) {
              // loop through handlebarsHelpers and pass to callback
        }
     },
},

[alex-shamshurin]

// loop through handlebarsHelpers and pass to callback

No, callback accepts only a path as an attribute, so object cannot be provided. So its impossible to use it

[cortopy]

I guess it's the same as using https://github.com/helpers/helper-date. For this one, this works for me:

{
        test: /\.(handlebars|hbs)$/,
        loader: 'handlebars-loader',
        options: {
          precompileOptions: {
            knownHelpersOnly: false
          },
          helperResolver: (helper, callback) => {
            switch (helper) {
              case 'date':
                callback(null, path.resolve('node_modules/helper-date'));
                break;
              default:
                callback();
            }
          }
        }
      }

and in the template:

{{$date "now" "MMMM YY"}}

Or even simpler (without having to add the helper in webpack):

{{$helper-date "now" "MMMM"}}

[v3nt]

@cortopy I'm struggling with helpers & was wondering if you could add you full config file and any other files used?

[cortopy]

@v3nt I'm afraid I don't have access to that project any more and I can't check, but it looks like the config I used is what I posted here already

[inkas]

I was having the same issue. Tried @cortopy's suggestion

options: {
  precompileOptions: {
    knownHelpersOnly: false,
  },
  helperResolver: (helper, callback) => {
    switch (helper) {
      case 'is':
        callback(null, path.resolve(__dirname, 'node_modules/handlebars-helpers'));
        break;
      default:
        callback();
    }
  }
}

This didn't work for me as handlebars-helpers returns an object containing the methods and the usage of

{{#is 1 1}} A {{else}} B {{/is}}

prints [object Object]. I feel I am very close but still can't find a proper solution to this.

Meanwhile following the handlebars-helpers documentation I found another solution.

webpack handlebars-loader options config

options: {
  precompileOptions: {
    knownHelpersOnly: false,
  },
  helperDirs: [
    path.resolve(__dirname, 'src/assets/js/handlebars/helpers'), // your helpers directory
  ],
}

src/assets/js/handlebars/helpers/is.js

import helpers from 'handlebars-helpers';

export default helpers().is;

The is example above should print A now. The disadvantage of this approach is you have to add every single method you want to use in your helpers dir.