Can't get i18next-browser-languageDetector plugin to work

For the past few days I’ve been trying to get this plugin to work: https://github.com/i18next/i18next-browser-languageDetector.

Everything I do fails, and the plugin doesn’t actually do anything. I dug through it’s source code and it uses simple methods to detect the language in the browser, for example by path (http://site.com/LANGUAGE): https://github.com/i18next/i18next-browser-languageDetector/blob/master/src/browserLookups/path.js, by navigator.language: https://github.com/i18next/i18next-browser-languageDetector/blob/master/src/browserLookups/navigator.js and such.

I have confirmed that the plugin actually loads, but simply doesn’t do anything and I got stuck.

To my understanding i18next in astro-i18next gets loaded with page-ssr which from the Astro API page documentation says:

Imported as a separate module in the frontmatter of every Astro page component. Because this stage imports your script, the Astro global is not available and your script will only be run once when the import is first evaluated.

Does this actually mean, that all of the window objects are unavailable for the plugin , and that is why it doesn’t work, or am I missing something?

Configured repo with this plugin is here. From the i18next documentation, changeLanguage gets called on Layout.astro without lng:

Calling changeLanguage without lng uses the language detector to choose the language to set.

This may be not an issue with this plugin, but rather my misunderstading of it or of Astro.

Thanks!

[yassinedoghri]

However I would please still like to know, why there’s no debug client side.

Hey @dallyh, have you managed to see the console logs?

I could see them when trying out React. Maybe there needs to be a client-side component for logs to show up? If you still get the problem, could you please create a new issue? I’ll try to tackle it whenever I get the chance.

[dallyh]

I think that after beta.13 release, it’s safe to say that this can be closed! 🎉

astro-i18next now loads 2 separate i18next configs:

• server-side with i18next-fs-backend by default
• client-side with i18next-http-backend and i18next-browser-languagedetector by default

Truly amazing work! But I have to admit I got a little bit lost here. Now astro-i18next should be loaded server side and also client side by default. That basically means that when I’m running the dev server, i should see the debug logs both in browser console and also in the terminal from Vite server (of course having both debug options enabled).

I quickly tried adding this to my config file, but the detection does not seem to work client-side (for example navigating with query string ?lng=cs), and also there are no client side browser console logs. i18nextServer: { debug: true }, i18nextClient: { debug: true, detection: { order: ['querystring', 'navigator', 'path', 'subdomain'], } }

Am I doing something wrong, or I just did not get the concept of this?

Thanks a lot!

EDIT: Allright figured out the first part. When building for SSG then i18next is run and all the strings are translated on runtime. However I would please still like to know, why there’s no debug client side.