Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I18n instance appears to load 'en' twice #119

Closed
bonney12 opened this issue Apr 12, 2023 · 1 comment · Fixed by #156
Closed

I18n instance appears to load 'en' twice #119

bonney12 opened this issue Apr 12, 2023 · 1 comment · Fixed by #156
Labels
bug Something isn't working

Comments

@bonney12
Copy link

Hi there - many thanks for your fantastic work on this plugin, it has made making a multilingual site much easier for us.

I am currently working on a bilingual website that will support both English and Arabic, with English being the default (and fallback) locale. The way I currently have it set up seems to be working absolutely fine on first visit to the page, with the English version (as stored in en.json for me) being displayed properly using the strings from the JSON file. It is also possible for me to change languages to the Arabic version (as stored in ar.json) with no problem, and all translates correctly.

However, the issue that arises, is when I try to swap back to the English version (via clicking a button which triggers loadLanguageAsync()). It seems as though the I18n.loaded Array ends up having two keys with en as the lang, and the empty one is the one being returned.

So far, I have been using the same code for the resolve function as recommended for Vite in the readme:

...
resolve: async (lang) => {
                   const langs = import.meta.glob("../../lang/*.json");
                   return await langs[`../../lang/${lang}.json`]();
               },
...

I have also been using loadLanguageAsync() to load the new locale when changing language, as mentioned above.

As a simple test, I adjusted the code for my language switcher dropdown to await the result of loadLanguageAsync('ar') and then to execute console.log(I18n.loaded), which returns an Array with three items instead of the two expected:

0: 
  lang: "en"
  messages: {}
  [[Prototype]]: Object
1: 
  lang: "en"
  messages: {(and :count more error): '(and :count more error)', (and :count more errors): '(and :count more errors)', }
  [[Prototype]]: Object
2: 
  lang: "ar"
  messages: {(and :count more error): '(و :count خطأ إضافي)', (and :count more errors): '(و :count أخطاء إضافية)', }
  [[Prototype]]: Object

It seems to be that first item that is being returned when I change the language back to English with loadLanguageAsync perhaps, as the second item contains all of the strings properly (and so if it were being loaded, would display everything as expected). I wonder if this could be because 'en' is also the fallbackLocale?

This definitely could be an issue somewhere on my side as I am quite new to Vue in the first place, so any pointers would be very welcome! Please let me know if I can give any other details to help.

Many thanks in advance!

@xiCO2k xiCO2k added the enhancement New feature or request label Jul 8, 2023
@xiCO2k xiCO2k added bug Something isn't working and removed enhancement New feature or request labels Jan 4, 2024
@xiCO2k
Copy link
Owner

xiCO2k commented Jan 4, 2024

That issue should be solved on version v2.7.4.

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants