Cannot read property 'loadText' of null

[Enrico Padovani]

I'm submitting a bug report

• Library Version:
  2.0.0

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  6.11.2

• NPM Version:
  5.5.1

• JSPM OR Webpack AND Version
  webpack 3.3.0

• Browser:
  all

• Language:
  TypeScript 2.5.3

Current behavior:
Cannot load json translation file. The error accours into aurelia-i18n-loader.js

TypeError: Cannot read property 'loadText' of null
aurelia-i18n-loader.js:54
    at Backend.loadUrl (webpack-internal:///247:55:29)
    at Backend.read (webpack-internal:///247:49:10)
    at Connector.read (webpack-internal:///242:173:32)
    at Connector.loadOne (webpack-internal:///242:283:10)
    at eval (webpack-internal:///242:229:16)
    at Array.forEach (<anonymous>)
    at Connector.load (webpack-internal:///242:228:21)
    at eval (webpack-internal:///236:244:42)
    at Connector.load (webpack-internal:///243:53:41)
    at I18n.loadResources (webpack-internal:///236:243:36)
    at setLng (webpack-internal:///236:309:14)
    at I18n.changeLanguage (webpack-internal:///236:319:7)
    at load (webpack-internal:///236:188:14)

Here's thw plugin config:

.plugin(PLATFORM.moduleName('aurelia-i18n'), (instance: I18N) => {
            instance.i18next.use(Backend);
            return instance.setup({
                backend: {
                    loadPath: '{{lng}}/{{ns}}',
                    parse: (data: any) => data,
                    ajax: (url: string, options: any, callback: any, data: any) => {
                        switch (url) {
                            case 'en/translation':
                                callback(enTranslationDefault, { status: '200' });
                                break;
                            default:
                                callback(null, { status: '404' });
                                break;
                        }
                    },
                },
                lng: selectedLanguage,
                attributes: ['t', 'i18n'],
                fallbackLng: 'en',
                debug: environment.debug,
                ns: ['translation'],
                defaultNS: 'translation',
            }).then(() => {
                const router = aurelia.container.get(AppRouter);
                router.transformTitle = (title: string) => instance.tr(title);
            });
        })

Expected/desired behavior:
The same piece of code is running with library version 1.6.2

[Vildan Softic]

You cannot use the internal Backend of your translation files are not prebundled and configured. Please try switching to the i18next-xhr-loader backend

[Enrico Padovani]

Is that something changed in version 2.0.0? Do you have an example / doc in how to do that?

I didn't mention that the translation should be in the bundle, because I'm importing itimport enTranslationDefault from './locales/en/translation.json'; and use enTranslationDefault variable in the ajax setting.

[Enrico Padovani]

The error was given by missing instance.i18next.use(Backend.with(aurelia.loader)); anyway if I do that, the string is not translated (the result is the key itself in code or empty in html). If I use instance.i18next.use(Backend); with Backend imported from i18next-xhr-backend, the translation seems to work in code not into html, ex: ${'my_string' & t} is empty.

[Vildan Softic]

Can you create a sample so that I can take a look at it?

[Enrico Padovani]

I don't know how to set up the environment quickly.

Anyway if I do <span t="my_string"></span> it works, but with string intertpolation does not <span>${'my_string' & t}</span>

Weird

[Enrico Padovani]

Ok, I figured out ... long time ago in .net we had dll hell ... here we have npm hell. I was using a library which was depending upon 1.6.2 I've updated that lib do use 2.0.0 and now it works as expected.

WTF!