Issues with using allowMultiLoading

[Baciu Florin-George]

🐛 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

[Adriano Raiano]

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

[Baciu Florin-George]

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?

[Adriano Raiano]

No.

[Baciu Florin-George]

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

[Adriano Raiano]

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

[Baciu Florin-George]

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

[Adriano Raiano]

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

[Baciu Florin-George]

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

[Adriano Raiano]

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

else, please create a minimal reproducible example github repo

[Baciu Florin-George]

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

[Adriano Raiano]

here the proposed fix: bfgelectronics/next-test-i18n#1

[Baciu Florin-George]

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)

[Adriano Raiano]

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

[Adriano Raiano]

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/

[Baciu Florin-George]

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.

[Adriano Raiano]

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.

[Baciu Florin-George]

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?

[Adriano Raiano]

Try to set maxParallelReads to 30 in the i18next init options

[Baciu Florin-George]

Finnaly it works, thank you!