# \[aurelia-i18n\] Translation loaded with warning message "Failed loading"

**URL:** <https://discourse.aurelia.io/t/aurelia-i18n-translation-loaded-with-warning-message-failed-loading/2081>\
**Category:** Help Requests\
**Created:** [January 4, 2019, 12:14pm UTC](https://discourse.aurelia.io/t/aurelia-i18n-translation-loaded-with-warning-message-failed-loading/2081 "2019-01-04T12:14:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![opack](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@opack](https://discourse.aurelia.io/u/opack)\
**Post date:** [January 4, 2019, 12:14pm UTC](https://discourse.aurelia.io/t/aurelia-i18n-translation-loaded-with-warning-message-failed-loading/2081/1 "2019-01-04T12:14:38Z")

</div>

Hello everybody ! 🙂

I am trying to use Aurelia-i18n but I run into some strange issue. After having quite some difficulties to make it work by looking at tips here on discourse and on SO, I managed to get to this result :

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/4/4985049f59e6f7d4d1d99d0118670523097e1451.png)

As you can see, my translation file is loaded, but I have a message telling me that is cannot be loaded. Strange, isn’t it ? 😊 More than the strangeness of this, what bother me is that the application is not displayed anymore. Nothing. Blank page. No error, nothing. And if I remove all the modifications I made (see below), the application works again. It seems that this problem is what is causing the application to not being rendered.

Thanks for your help ! 😉

Here are the modifications that I made:  
**webpack.config.js**  
Added (in `rules`):

```auto
{ test: /\.json$/i, use: 'json-loader', type: 'javascript/auto' },
```

Added (in `new ModuleDependenciesPlugin`constructor):

```auto
'aurelia-i18n': [ 
    { name: 'locales/en/translation.json', chunk: 'i18n-en' },
    { name: 'locales/fr/translation.json', chunk: 'i18n-fr' }
]
```

Added (in `plugins`):

```auto
    new CopyWebpackPlugin([
              { from: 'src/locales/', to: 'locales/' }
              //{ from: 'locales/', to: 'locales/' }
    ]),
```

**main.ts**  
Added (in `configure()`):

```auto
    .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.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
              loadPath: 'locales/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
            },
            attributes: aliases,
            lng : 'fr',
            fallbackLng : 'fr',
            debug : true
          });
        })
```

**New files**  
Added `src/locales/en/translation.json` and `src/locales/fr/translation.json`, both with the following content:

```auto
{
          "score": "Score: {{score}}",
          "lives": "{{count}} life remaining",
          "lives_plural": "{{count}} lives remaining",
          "friend": "A friend",
          "friend_male": "A boyfriend",
          "friend_female": "A girlfriend"
}
```

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [January 9, 2019, 6:19am UTC](https://discourse.aurelia.io/t/aurelia-i18n-translation-loaded-with-warning-message-failed-loading/2081/2 "2019-01-09T06:19:40Z")

</div>

If you see a completely blank page that means `aurelia-loader` threw an error while it tried loading a plugin, feature or resource. These errors are swallowed and the application stops trying to load. Point for improvement.

You could try debugging aurelia and “break on caught exceptions” to see where exactly it chokes.

It’s most likely either a path resolution issue or a duplicate transformation issue (meaning webpack transforms your json into javascript, aurelia tries to load it as json and then the json parser fails).

You could try disabling the json-loader or loading json with raw-loader instead. I’m not sure what `type: 'javascript/auto'` does, I’ve never seen it before. Could you shed some light on that?

---

<div class="post-metadata">

**Author:** ![davismj](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davismj/32/267_2.png) [@davismj](https://discourse.aurelia.io/u/davismj)\
**Post date:** [January 10, 2019, 12:19pm UTC](https://discourse.aurelia.io/t/aurelia-i18n-translation-loaded-with-warning-message-failed-loading/2081/3 "2019-01-10T12:19:44Z")

</div>

For webpack, I typically use the xhr backend plugin. Have you tried this?

---

<div class="post-metadata">

**Author:** ![opack](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@opack](https://discourse.aurelia.io/u/opack)\
**Post date:** [January 11, 2019, 12:06pm UTC](https://discourse.aurelia.io/t/aurelia-i18n-translation-loaded-with-warning-message-failed-loading/2081/4 "2019-01-11T12:06:10Z")

</div>

Sorry for the delay !

@davismj yes, I tried that before, with no success ☹ That’s why I switched back to the “standard” way of doing things.

@fkleuver I tried debugging Aurelia. When I set some breakpoints I have a different behavior. I end up in [here](https://github.com/aurelia/i18n/blob/13a9f9d898ce73050fac06bf772faecf7546892d/src/aurelia-i18n.ts#L41). Don’t ask me why… Anyway, the plugin seems to fail to configure as I did not give it some callback, which is absolutly true as I do not know anything about a required callback 🙂 As the plugin fails, the `setRoot`in `main.ts`is never called. I think this is what causes the blank page.

In the meantime, I have been creating my very own i18n service, as my needs are not that big. If someone as a hint, I’ll try to test it (I’ll keep my code in my stash for a moment).

Thanks for your help anyway ! 🙂

---

<div class="post-metadata">

**Author:** ![davismj](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davismj/32/267_2.png) [@davismj](https://discourse.aurelia.io/u/davismj)\
**Post date:** [January 11, 2019, 12:25pm UTC](https://discourse.aurelia.io/t/aurelia-i18n-translation-loaded-with-warning-message-failed-loading/2081/5 "2019-01-11T12:25:35Z")

</div>

If you give some feedback about what went wrong with the xhr plugin I can help.

---

<div class="post-metadata">

**Author:** ![opack](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@opack](https://discourse.aurelia.io/u/opack)\
**Post date:** [January 11, 2019, 4:02pm UTC](https://discourse.aurelia.io/t/aurelia-i18n-translation-loaded-with-warning-message-failed-loading/2081/6 "2019-01-11T16:02:37Z")

</div>

When I follow the [documentation](https://aurelia.io/docs/plugins/i18n#installing-the-plugin), here is what I get using xhr plugin:

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/c/c2179d8d185a759f4fd0930845037578e10b253b.png)  
When I had this, I must confess that I did not look into it very much; I told myself “_hey, why are you not using the built-in backend?_” and I tried the built-in backend, with the result you already know about 😅