Dynamic load not allowed installing i18n

Help Requests
1

Today I tried to install i18n-translation in my aurelia-cli project. I did the steps described in the aurelia i18n guide.

But now I’m getting an error in chrome browser vendor-bundle.js:34158 Uncaught Error: Dynamic load not allowed: locales/de/translation.json.

Does anyone now why this error occurs and how I can fix that?

I don’t use webpack (only requirejs).
Follownig the plugin configuration (didn’t change anything):

 .plugin('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: 'de',
        fallbackLng: 'en',
        debug: false
      });
    })
1 Like
2

The i18n doc has additional info on how to bundle json files with cli requirejs.

However latest cli 1.0.0.beta.6 had implemented bundling json files by default. Pls start a new requirejs app, it should all work now.

We will update i18n doc.

3

Thank you for the response. I checked my setup. The app is already created with aurelia 1.0.0-beta.6 :frowning:

What can I check so figure out why this problem appears?

4

You can upgrade cli version, then copy over two files from a new app generated by au new:


aurelia_project/tasks/process-json.js

aurelia_project/tasks/build.js
5

Can you check do you have local process-json task?

6

Hey, again many thanks for your help. I got it working. The trick for me was to change

import Backend from 'i18next-xhr-backend';

to

import * as Backend from 'i18next-xhr-backend';

Then the following main.ts config works:

.plugin('aurelia-i18n', (instance) => {
      let aliases = ['t', 'i18n'];
      // add aliases for 't' attribute
      TCustomAttribute.configureAliases(aliases);

      // register backend plugin
      instance.i18next.use(Backend);

      // 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: 'de',
        fallbackLng: 'en',
        debug: false
      });
    });
7

The xhr backend uses ajax to dynamically load json files (not through requirejs), instead of bundling them. You have to make sure those json files were copied to right places when deploy to production site.

8

Ok. Thank you for that hint :slight_smile:
I’ll keep that in mind

9

Yes I have a “Process-json” task.
Having a look into the aurelia.json I see that maybe the default path doesn’t fit to the i18n description:

 "jsonProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".json",
    "source": "src/**/*.json"
  },

The json-processor would look into the src folder. But according to i18n guide, the json files are saved in root (same level as src).
Maybe this could be a reason. But now I’m using the xhr-backend what works for me.

10

:slight_smile:

Second, create a folder named locales in your project’s root.

This is where the doc is confusing, it means project root as defined in aurelia.json which is src folder in your repo.

If you further look down the doc, you will see mention of src/locales files.

I remember early version of i18n indeed talked about translation files outside of src folder and dynamically loading them. To me, dynamical loading fit the nature of i18n, who wants to load all possible lanaguages upfront while user is gonna use just one of them.

The current default setup with default loader and default json bundling is biased to easiness than technical best choice.

Since you are using dynamic loading now, there is no reason to go back to default setup.

1 Like