How to use i18N with backend in au-cli webpack projects?


How can I load translation files into my project?
There seams to be an issue with Backend and is undefined

Create the project:

au-cli new i18NTest
3 Custom
3 Webpack
1 Web
1 Babel
: N/A

Install dependencies:

yarn add aurelia-i18n
yarn add i18next-xhr-backend

Create the translation files:
“msg” : “Hello world!”

“msg”:“Hallo verden!”


import environment from './environment';
import {PLATFORM} from 'aurelia-pal';
import 'babel-polyfill';
import * as Bluebird from 'bluebird';
import {I18N, TCustomAttribute} from 'aurelia-i18n';
import Backend from 'i18next-xhr-backend';

// remove out if you don't want a Promise polyfill (remove also from webpack.config.js)
Bluebird.config({ warnings: { wForgottenReturn: false } });

export function configure(aurelia) {

  // Uncomment the line below to enable animation.
  // aurelia.use.plugin(PLATFORM.moduleName('aurelia-animator-css'));
  // if the css animator is enabled, add swap-order="after" to all router-view elements

  // Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
  // aurelia.use.plugin(PLATFORM.moduleName('aurelia-html-import-template-loader'));

  if (environment.debug) {

  if (environment.testing) {

  aurelia.use.plugin(**PLATFORM.moduleName('aurelia-i18n')**, (instance) => {
    let aliases = ['t', 'i18n'];
    // add aliases for 't' attribute
    // register backend plugin
    instance.i18next.use(Backend);   **//  Backend is not defined**

    // adapt options to your needs (see
    // make sure to return the promise of the setup method, in order to guarantee proper loading
    return instance.setup({
      backend: {                                  // <-- configure backend settings
        loadPath: './locales/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from 
      attributes: aliases,
      lng : 'no',
      fallbackLng : 'en',
      debug : false

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));


import {I18N} from 'aurelia-i18n';
import {inject} from 'aurelia-framework';

export class App {
    this.i18N = i18N;
    console.log('msg'));  **//tr is undefined**


According to:
Failed to load translation with aurelia backend and latest webpack 2.6.1 #221

  • Webpack is not a loader
  • JSON files can be added as chunks

in webpack.config.js

       new ModuleDependenciesPlugin({
           'aurelia-testing': [ './compile-spy', './view-spy' ],
           "aurelia-i18n": [ 
             { name: "locales/en/translation.json", chunk: "lang-en" },
             { name: "locales/no/translation.json", chunk: "lang-no" }


You are using the Backend Loader provided by the plugin but you installed the xhr-i18next-plugin. So you should import the backend from there and wire it. Take a look at the plugin docs. The provided backend from aurelia really depends on the loader capability as such its not the right fit for Webpack.


Actually, I got the main.js wrong the first time I’ve corrected it.
I’m still having the same issue that backend is not defined.


Have you checked the import? I’m not sure how this is bundled with webpack, so try import * as Backend and console.log it to see whats returned.


I did not receive much
import * as Backend from ‘i18next-xhr-backend’;

console printout console.log(Backend):
ƒ Backend(services) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

_classCallCheck(this, Backend);

this.init(services, options);

this.type = …