[3.0.0-beta.1] Failed loading translation files with aurelia backend and webpack

[graycrow]

I'm submitting a bug report

• Library Version:
  3.0.0-beta.1

Please tell us about your environment:

• Operating System:
  Windows 8.1

• Node Version:
  10.9.0

• NPM Version:
  6.4.1

• Webpack 4.17.2

• Browser:
  all
• Language:
  TypeScript 3.0.3

Current behavior:
My translation files included in the Webpack bundle using ModuleDependenciesPlugin:

new ModuleDependenciesPlugin({
            "aurelia-i18n": [
                { name: "locales/cs-CZ/translation.json" },
                { name: "locales/en-US/translation.json" }
            ]),

and this is my aurelia-i18n plugin registration:

.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: "cs-CZ",
                    fallbackLng: "en-US",
                    debug: false,
                    interpolation: {
                        format: function(value: string, format: string, lng: string) {
                            if (value == undefined) {
                                return value;
                            }
                            switch (format) {
                                case "uppercase":
                                    return value.toUpperCase();
                                case "lowercase":
                                    return value.toLowerCase();
                                case "capitalize":
                                    return value.charAt(0).toUpperCase() + value.slice(1);
                                default:
                                    return value;
                            }
                        }
                    }
                })
                .then(() => {
                    const router = aurelia.container.get(AppRouter);
                    router.transformTitle = (title) => instance.tr(title);

                    const eventAggregator = aurelia.container.get(EventAggregator);
                    eventAggregator.subscribe("i18n:locale:changed", () => {
                        router.updateTitle();
                    });
                });
        })

After upgrading to 3.0.0-beta.1 this setup doesn't work anymore and throws the following error: Unhandled rejection (<failed loading /locales/cs-CZ/translat...>, no stack trace)

Expected/desired behavior:

• What is the expected behavior?
  It's working fine with aurelia-i18n 2.3.2

[chabou-san]

I think I'm reporting the same issue in #282. By the time I wrote it, this one got published. Sorry for the duplicate!

[graycrow]

@chabou-san, after a quick look I'm not sure if it's the same issue. You see, looks like in my case options are taken into account, because error message has the loadPath filled with parameters.

[chabou-san]

This is the same error I got, as I have the same configuration as you. Your options specify :

loadPath: "locales/{{lng}}/{{ns}}.json"

whereas the default value for loadPath is "/locales/{{lng}}/{{ns}}.json" (see

i18n/src/aurelia-i18n-loader.ts

Line 38 in e2ff048

loadPath: "/locales/{{lng}}/{{ns}}.json",

and notice the trailing slash at the beginning, and it is the one in your logged error).
This single difference causes the issue in webpack to unsuccessfully load the file.
This is supposed to be the error I'm reporting anyway. :-)

[graycrow]

@chabou-san - Oh, I see. You did a great job by pointing out the exact place where the issue occurs. Hope it will help Aurelia team to fix it soon (and no, I'm not forcing you guys to rush :) you doing even greater favor to all of us by creating Aurelia Framework and it's plugins :)).

[zewa666]

Thanks guys for giving the Beta a try. Expected few issues so its great to have you tried it out. I'll try to get to it asap next week. Meanwhile PRs on the port-to-typescript branch are welcome ;)

[zewa666]

@graycrow and @chabou-san can you guys try out the latest beta-2 and see if that fixes your issues?

[graycrow]

@zewa666, unfortunately no, the same error, but now without leading slash: Unhandled rejection (<failed loading locales/cs/translation....>, no stack trace)

[EDIT] I continuing to investigate the issue and just noticed that it requesting the non-existing file: cs instead of cs-CZ.

[graycrow]

@zewa666, ok, I found the source of my issue, it works now. In the current version of the i18next framework LanguageUtil.prototype.toResolveHierarchy() adds extra languages by default if configuration option load is not set to currentOnly. So now the relevant part of my main.ts looks like this:

...
.setup({
                    backend: {
                        // <-- configure backend settings
                        loadPath: "locales/{{lng}}/{{ns}}.json" // <-- XHR settings for where to get the files from
                    },
                    attributes: aliases,
                    lng: "cs-CZ",
                    fallbackLng: "en-US",
                    load: "currentOnly",
                    debug: false,
...

More about load options.

[zewa666]

ok so that boils down to a new breaking change of i18next itself. Good catch @graycrow.
The trouble in the end is that the webpack build actually crashes if it cant find the file, which instead should be treated as a warning.

Would be great if you could build a small sample and share it via a GitHub repo so we can try to calm webpack down.

[chabou-san]

@graycrow and @chabou-san can you guys try out the latest beta-2 and see if that fixes your issues?

For my configuration, beta-2 is fixing the issue.

[graycrow]

Would be great if you could build a small sample and share it via a GitHub repo so we can try to calm webpack down.

@zewa666: here it is.

[zewa666]

@graycrow awesome, I'll take a look at it as soon as I can. Having your workaround is great. Ideally as said though I'd like to find a way to treat non-existing translation files as warnings vs errors and continue execution