I try to move from sprockets to jsbundling with esbuild in our rails application.

Therefore I added all of the important dependencies to the package.json and installed everything yarn.

Additionally, the structure is the following:

├── assets
│   ├── javascripts
│       ├── views
│       │   └── js1.js
|       |   └── js2.js
│       └── application.js
        └── globals.js

In the application.js I import most of the libraries and all views related javascripts from the views folder.

All of the view-javascripts are structured like this:

export default (() => {
    //javascript code here
})();

Additionally to those scripts, there is a globals.js which holds jquery deferred objects, on which the view-scripts can listen to.

For our project we want to use i18next, with the current versions.

In the globals.js we initialize the i18next in this way:

import i18next from 'i18next'
import Backend from 'i18next-chained-backend'
import LocalStorageBackend from 'i18next-localstorage-backend/'
import HttpApi from 'i18next-http-backend'

globalVariables.dfd.i18next = $.Deferred();

i18next
    .use(Backend)
    .init({
        backend: {
            backends: [
                LocalStorageBackend,
                HttpApi
            ],
            backendOptions: [{
                enabled: true,
                expirationTime: 10,
                versions: {
                    en: 'v2022-08-03',
                    de: 'v2022-08-03',
                    fr: 'v2022-08-03'
                }
            },
                {
                    loadPath: '/assets/i18next/{{lng}}.json' // {{lng}}-{{ns}}
                }
            ]
        },
        lng: globalVariables.language,
        fallbackLng: {
            'ch': ['de'],
            'default': ['en']
        }
    }).then(() => {
     globalVariables.dfd.i18next.resolve();
     console.log('i18next initialized');
    });

Now, multiple views-javascriptsare listening to this globalVariables.dfd.i18next object and as soon as it is resolved it should execute the code. With this we make sure, that i18next is initialized.:

export default (() => {
  $.when($.ready, order.dfd.i18next).done(() => {
    //do some code
  });
return true;
})();

Somehow it only gets resolved for the first file but not for the second and the following error comes up in the console:

i18next::backendConnector: loading namespace translation for language en failed Error: non of the backend loaded data

As soon as I comment out the HttpApi it seems to work.

MY QUESTION IS: Do I have some major issues with the module structure setup and how can I use i18next in this context?

So everything should be initialized correctly also with the deferred objects.