# \[SOLVED\] How to use i18N with backend in au-cli webpack projects?

**URL:** <https://discourse.aurelia.io/t/solved-how-to-use-i18n-with-backend-in-au-cli-webpack-projects/542>\
**Category:** Help Requests\
**Created:** [December 18, 2017, 8:21am UTC](https://discourse.aurelia.io/t/solved-how-to-use-i18n-with-backend-in-au-cli-webpack-projects/542 "2017-12-18T08:21:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![einaradolfsen](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/einaradolfsen/32/409_2.png) [@einaradolfsen](https://discourse.aurelia.io/u/einaradolfsen)\
**Post date:** [December 18, 2017, 8:21am UTC](https://discourse.aurelia.io/t/solved-how-to-use-i18n-with-backend-in-au-cli-webpack-projects/542/1 "2017-12-18T08:21:13Z")

</div>

How can I load translation files into my project?  
There seams to be an issue with Backend and this.i18n.tr 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:**  
src/locations/en/transtation.json:  
{  
“msg” : “Hello world!”  
}

src/locations/no/translation.json:  
{  
“msg”:“Hallo verden!”  
}

**main.js:**

```
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) {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'));

  // 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) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

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

    // adapt options to your needs (see http://i18next.com/docs/options/)
    // 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')));
}

```

**app.js:**

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

@inject(I18N)
export class App {
  constructor(i18N){
    this.i18N = i18N;
    
    console.log(this.i18n.tr('msg')); **//tr is undefined**
    
  }

```

}

According to:  
[Failed to load translation with aurelia backend and latest webpack 2.6.1 #221](https://github.com/aurelia/i18n/issues/221)

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

in webpack.config.js

```
plugins:[
      :
       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" }
           ]
         }),
      :
    ]

```

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [December 18, 2017, 8:24am UTC](https://discourse.aurelia.io/t/solved-how-to-use-i18n-with-backend-in-au-cli-webpack-projects/542/2 "2017-12-18T08:24:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![einaradolfsen](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/einaradolfsen/32/409_2.png) [@einaradolfsen](https://discourse.aurelia.io/u/einaradolfsen)\
**Post date:** [December 18, 2017, 9:04am UTC](https://discourse.aurelia.io/t/solved-how-to-use-i18n-with-backend-in-au-cli-webpack-projects/542/4 "2017-12-18T09:04:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [December 18, 2017, 9:19am UTC](https://discourse.aurelia.io/t/solved-how-to-use-i18n-with-backend-in-au-cli-webpack-projects/542/5 "2017-12-18T09:19:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![einaradolfsen](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/einaradolfsen/32/409_2.png) [@einaradolfsen](https://discourse.aurelia.io/u/einaradolfsen)\
**Post date:** [December 18, 2017, 10:52am UTC](https://discourse.aurelia.io/t/solved-how-to-use-i18n-with-backend-in-au-cli-webpack-projects/542/6 "2017-12-18T10:52:04Z")

</div>

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 = …
```

---

<div class="post-metadata">

**Author:** ![einaradolfsen](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/einaradolfsen/32/409_2.png) [@einaradolfsen](https://discourse.aurelia.io/u/einaradolfsen)\
**Post date:** [February 13, 2018, 12:06pm UTC](https://discourse.aurelia.io/t/solved-how-to-use-i18n-with-backend-in-au-cli-webpack-projects/542/7 "2018-02-13T12:06:04Z")

</div>

Yesterday I had another go at using i18N plugin:  
(I revisited the thead [Failed to load translation with aurelia backend and latest webpack 2.6.1 #221](https://github.com/aurelia/i18n/issues/221), and noticed it has bean updated with some useful tips )

I got the plugin working by importing the Backend from aurelia-i18n, since I have no reason to use i18next-xhr-backend in the first place.

For the record:  
**Create the project**  
same as before

**Install dependencies**  
yarn add aurelia-i18n

**Create the translation files**  
src/locations folder must be renamed to src/locales, to be aligned with the code

**main.js :**  
////CHANGES FROM PREVIOUS main.js uses 4 slashes like so ////  
import environment from ‘./environment’;  
import {PLATFORM} from ‘aurelia-pal’;  
import ‘babel-polyfill’;  
import \* as Bluebird from ‘bluebird’;

```
////IMPORTING Backend FROM aurelia-i18n
import {Backend, TCustomAttribute} from 'aurelia-i18n'; 
////REMOVED 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) {

aurelia.use
  .standardConfiguration()
  .feature(PLATFORM.moduleName('resources/index'));

// 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) {
  aurelia.use.developmentLogging();
}

if (environment.testing) {
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
}

aurelia.use.plugin(PLATFORM.moduleName('aurelia-i18n'), (instance) => {
  let aliases = ['t', 'i18n'];

  // add aliases for 't' attribute
  TCustomAttribute.configureAliases(aliases);

  // register backend plugin
 //// BACKEND IS CHANGED
 //// old line: instance.i18next.use(Backend);
  instance.i18next.use(Backend.with(aurelia.loader));

  // adapt options to your needs (see http://i18next.com/docs/options/)
  // make sure to return the promise of the setup method, in order to guarantee proper loading
  return instance.setup({
    backend: { // <-- configure backend settings

       //// **JSON LOADER DOES NOT SUPPORT './' IN PATH**
      //// old line: loadPath: './locales/{{lng}}/{{ns}}.json', //<-- XHR settings for where to get the files from
      loadPath: 'locales/{{lng}}/{{ns}}.json', //<-- XHR settings for where to get the files from
    },
    attributes: aliases,
    lng : 'no',
    fallbackLng : 'en',
    debug : true
  });
  });

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

```

**app.js**  
fix typo line 9 [this.i18n.tr](http://this.i18n.tr) must be [this.i18N.tr](http://this.i18N.tr)

**webpack.config.js**  
no changes