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

[dallyh]

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]

Thanks for the issue!

I think one would expect i18next plugins to just work when using astro-i18next, so I've labeled this as a bug.

Though, I think that the best solution is to change the behavior of page-ssr directly on Astro as astro-i18next relies heavily on that to work properly.

That being said, I've written an rfc for this: withastro/roadmap#293

[dallyh]

That's great! RFC looks good to me. Anyways is there maybe a workaround over this, besides implementing the detection and or the whole i18next myself? I currently don't have any ideas.

[yassinedoghri]

That's great! RFC looks good to me. Anyways is there maybe a workaround over this, besides implementing the detection and or the whole i18next myself? I currently don't have any ideas.

That's a good question! Haven't had time to think about it in details. So, thinking out loud...

1. Language Detection:

• SSG: must be done via a client side script
• SSR: can be done via a client side or (preferably?) a server side script

2. After detection:

• automatically redirected to the page corresponding to their preferred language (to be avoided according to google - https://developers.google.com/search/docs/advanced/crawling/managing-multi-regional-sites#let-the-user-switch-the-page-language)
• add banner prompting them to switch to their preferred language (on first visit, keep the preferred language client side then).

For starters, astro-i18next loads i18next on page-ssr (server side). And the browser language detector plugin you're including is meant to be run client side.

Maybe i18next needs to be loaded both in server side with page-ssr and client side during page stage.

There are other issues beyond this, the t function is resolved during build time for SSG but it sometimes needs to be resolved on client side to format date times for example.

As for astro-i18next utilities that can be added: a function that detects language (to be used client side) and/or a component that detects + shows a banner to switch offers to switch?

For reference:

• https://docs.astro.build/en/concepts/mpa-vs-spa/
• https://docs.astro.build/en/concepts/islands/#how-do-islands-work-in-astro

[L1lith]

It would be super cool if you could have some kind of setup where there's a compute instance that gets spun up for every region of the world automatically that would be translate the site to the most popular language in that region automatically, then that response could be cached on a CDN for performance/cost reasons.
Related: Caching Lambda responses with Cloudflare

[yassinedoghri]

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

[L1lith]

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](https://github.com/i18next/i18next-fs-backend) by default

* **client-side** with [i18next-http-backend](https://github.com/i18next/i18next-http-backend) and [i18next-browser-languagedetector](https://github.com/i18next/i18next-browser-languageDetector) by default

🎉 Seriously impressive work

[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.

[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.

[GoldenSoju]

I am still a bit lost here, as I am working on an SSG project but I cannot get the language detection to work.
(No other framework, just Astro)
I use version v1.0.0-beta.17, and I understood that the language detection should work out of the box.
Or do I have to add something to the configuration file?

At the moment the locale always changes to the set defaultLocale.

Any help is much appreciated.

[danieldaeschle]

I have the same problem! Not working on client side!