Issues with using allowMultiLoading

[bfgelectronics]

🐛 Bug Report

I cant get to get the allowMultiLoading to work.
My issue is that i have all the namespaces on a single file on the CDN but the http backends make a request for every namespace i have , so i would like to group the namespaces in a way that would allow only one request to be made (as the cdn returns all the namespaces on every request).

To Reproduce

The backend options used

          allowMultiLoading: true,
          loadPath:
            'cdn.com/{{lng}}/file.json?lng={{lng}}&ns={{ns}}',
          addPath: '/locales/add/{{lng}}/{{ns}}',

Expected behavior

The http backend should group the namespaces.

Your Environment

• runtime version: NextJS v12.3
• i18next version: 21.9.2
• os: Linux

[adrai]

compare with this example: https://github.com/i18next/i18next-multiload-backend-adapter/tree/master/example

[bfgelectronics]

Thank you for the response. Unfortunatley i cant fully replicate that since the project is configured a bit different, but tried and failed.
Is there any other option in my case to reduce the number of requests to one?

[adrai]

No.

[bfgelectronics]

So what should i try to make the allowMultiLoading to work?

[adrai]

like said compare your setup with this one: https://github.com/i18next/i18next-multiload-backend-adapter/tree/master/example

• check if the backend options are passed correctly
• check your server side if the requests are coming and consumed accordingly

[bfgelectronics]

Thank you , but now i realise that that example is implemented in express, and for some reason when i try to use the MultiLoadBackendAdapter plugin in my NextJS configs it errors out with :

Module not found: ESM packages (i18next-multiload-backend-adapter) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

Even if i import it with the import keyword

[adrai]

For Next.js to import like this:

const MultiloadAdapter = require('i18next-multiload-backend-adapter/cjs')
analogous to this: https://github.com/i18next/i18next-http-backend/blob/master/example/next/next-i18next.config.js#L1

[bfgelectronics]

Unfortunatley even if i tried that using the required keyword or inport, still i get:

Module not found: ESM packages (i18next-multiload-backend-adapter/cjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

[adrai]

and import MultiloadAdapter from 'i18next-multiload-backend-adapter/esm' ?

else, please create a minimal reproducible example github repo

[bfgelectronics]

So i made this sample project, by default it makes a req per namespace and i cant find any way to reduce that to 1 req:
https://github.com/bfgelectronics/next-test-i18n/tree/main

[adrai]

here the proposed fix: https://github.com/bfgelectronics/next-test-i18n/pull/1

[bfgelectronics]

Thank you soo much, but unfortunatley for some reason the FE doesnt make any requests to the backend (at least none that i can see ).
Also the "BE" in my case was just some dummy thing. In my real usecase i hit the Localazy CDN to get the translations so i have no controll over what i get ( except the language that i need)

[adrai]

in next.js it is server side first, that's why you don't see any request from the client by default

[adrai]

btw. Why you don't use the official i18next tms (locize.com) that supports the future of i18next?
There's an official blog post and example: https://locize.com/blog/next-i18next/

[bfgelectronics]

Thank you ! I agree with the fact that server side is first but i put a console log on the api endpoint an i see no requests.

Sincerley Locize looks better than localazy in terms of features and ill use it in future projects but unfortunatley on the current project i have no power of chosing.

[adrai]

You see no requests, because for the server side rendered pages it will not do any request, it will just load the translations from the file system.
If you want to load them via http you need to remove the isBrowser check in the config and also have an external api endpoint that returns the translations.

[bfgelectronics]

Sorry for deviating from the initial Issue, but added the MultiloadAdapter and it groups the namespaces but only in 10 pairs, (so in my case there are 30 namespaces) is there any proprety that adjust the namespace count per search?

[adrai]

Try to set maxParallelReads to 30 in the i18next init options

[bfgelectronics]

Finnaly it works, thank you!