Comment by Patrick on "Internationalization in SvelteKit with typesafe-i18n"

CommentInternationalization in SvelteKit with typesafe-i18n

Patrick

Aug 12, 2023

Thank you for your article.

I just implemented it in my SvelteKit app as described, with EN and DE and without a language switch, but with hooks.server.ts and +layout.ts

When I refresh a page, it shows (correctly) the DE translations for a split second, then it changes to en. I also update the html lang in my hook and notice that it's correct with DE. Therefore something is wrong with the client side. It always changes the locale to EN, no matter what I do. If I call setLocale() in a +page.svelte file manually, it changes to DE but it does not show a single DE translation. Do you have any clue?

Aakash Goplani

Frontend Dev. Mostly Angular and Svelte.

Aug 12, 2023

Hello Patrick,

Are you using sessionstorage properly with key as "lang"?

You can refer section "4. Detect the locale on the client side" and "Locale Switching".

I know you are not switching locales but this section will give you idea on how to use session storage for persisting user locale.

Aakash Goplani Thank you! I'm not using the session storage key (just want to use the browser detection for the moment) and detectLocale(sessionStorageDetector) will then use the fallback EN, so the || will never be called. I just removed it and it works now.

Search Hashnode