Handlebars custom helper - migrating to Webpack

We have an app based on backbone, marionette and handlebars, without import/export or require methods, managed with grunt and we are trying to migrate to webpack.

I am having an issue with a custom helper for handlebars.

The code of our helper :

'use strict';

function I18n() {
this.constructor(arguments);
}

I18n.prototype = {

constructor: function () {
...some stuff

}

get: function () {
...some stuff
}
...some other functions
}

ourNameSpace.I18n = new I18n();


And it's included with this function in a file to load it globally :

Handlebars.registerHelper('i18n', _.bind(ourNameSpace.I18n.get, ourNameSpace.I18n));


Then we are using it in the template like this :

{{i18n "LblEmail"}}


I tried to use handlebars-loader and I added this query object into webpack.config to add it to the bundle :

{
test: /.hbs$/,
use: {
loader: 'handlebars-loader',
query: {
helperDirs: [
path.resolve(__dirname, 'public/assets/js/common/i18n/')
]
}
}
}


Webpack add our helper code in the bundle, but when it's supposed to be called in the template I have this error :

Uncaught TypeError: __default(...).call is not a function


Webpack generated code of the bundle where is the call :

...
+ alias2(__default(__webpack_require__(2)).call(alias1,"LblEmail",{"name":"i18n","hash":{},"data":data}))
...


In a second time I also tried to add an export in the helper, even though we don't use the import/export method (yet) in our app. Adding this at the end of helper file :

export default I18n


That fix the error but the helper doesn't seem to work because all texts on the page are empty (instead of displaying i18n translation or keys)

Does someone did the same kind of migration with handlebars custom helper or would know how I can refactor that so Webpack can handle it properly and the bundle can execute it correctly ?

1 Answer
1

So after few months I will reply to my own question, I managed to fix our problem like this :

I rewrite our old legacy helper (with custom functions) by creating more modern ones (three, for our three functions that was in legacy helper) relying on I18nJS:

import I18nJs from 'i18n-js';
const I18n = key => I18nJs.t(key);
export default I18n;


It is loaded by webpack with handlebars loaders like this :

{
test: /.hbs$/,
use: {
loader: 'handlebars-loader?runtime=handlebars/runtime',
query: {
helperDirs: [path.resolve(__dirname, 'src/js/common/i18n/helper')],
inlineRequires: '/images/',
precompileOptions: {
knownHelpersOnly: false,
},
},
},
}


And in our template we did not have to change anything to use it :

<label>{{i18n "LblEmail"}}</label>


To use localisation on javascript files however we had to make some changes :

I created a "helper" (not handlebar helper) implementing same logic than handlebars helper :

import I18nJs from 'i18n-js';

const I18n = {
get(key) {
return I18nJs.t(key);
},

... some other functions
};
export default I18n;


We import this file and use its function as usual in modern stacks :

import I18n from '../common/i18n/I18nSt';
...
console.log(I18n.get('PasswordMissing'));


So we had to do minor refactor when we call our translations function in our js files, It was like this before :

console.log(OurNamespace.I18n.get('PasswordMissing'));


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.