Use I18next With Xhr Backend In Client-side Javascript

The documentation at i18next-xhr-backend tells me to use import to load their module. But when I use the import-statement, nothing happens and Firefox gives me a SyntaxError in the

Solution 1:

I needed to use i18nextXHRBackend instead of just XHR, since that is the name the class gets loaded as if no loader is used. As the README.md says:

If you don't use a module loader it will be added to window.i18nextXHRBackend

I didn't see that before, and I didn't know that this will happen automatically, but it seems that you have to find that out on your own if not using a module loader. Lesson learned, hopefully this will help some other newbies being stuck on how to use modules in javascript. Therefore, my complete localisation.js looks like this:

$(document).ready(function() {
    i18next
        .use(i18nextXHRBackend)
        .use(i18nextBrowserLanguageDetector)
        .init({
            debug: true,
            backend: {
                loadPath: 'locales/{{lng}}/{{ns}}.json',
                addPath: 'locales/add/{{lng}}/{{ns}}'
            }
        }, function(err, t) {
            jqueryI18next.init(i18next, $);
            $('.translatable').localize();
            $('.language-button').click(function() {
                i18next.changeLanguage(this.firstElementChild.alt).then(function(t) {
                $('.translatable').localize(); 
                $('#signupPassword').pwstrength("forceUpdate");
                $('#signupPasswordConfirm').pwstrength("forceUpdate");
            });
        });
    });
});