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

[opack]

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 :

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):

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

Added (in new ModuleDependenciesPluginconstructor):

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

Added (in plugins):

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

main.ts
Added (in configure()):

    .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:

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

[fkleuver]

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?

[davismj]

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

[opack]

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. 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 setRootin main.tsis 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 !

[davismj]

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

[opack]

When I follow the documentation, here is what I get using xhr plugin:

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