ivanhofer/typesafe-i18n-demo-sveltekit

locale not storing correctly or changing back

Closed this issue · 3 comments

So everything works, which I am very thankful for. Except there's 1 problem:
Whenever I change locale, it reverts to the previous locale when I navigate to another page.
When I change locale, reload the page and then navigate to another page, it does stay. But then when I change locale once more, it changes back to the last one I reloaded on.
I've been looking for hours for why this happens, but I can't seem to find it.

I've got everything the same as the example project.

I've gotten to the core of the problem:
It doesn't work because I'm loading my nav items through an {#each}-loop.
I define my pages through my db, and add a {$locale} in between the url. This doesn't render the locale in a reactive state (I guess), making it route to the first set locale at any point.
When I add the links in the html-part of the navbar, and thus not render them through an {#each}-loop, it works fine.

Problem solved, but might be something to look at later.

TL;DR:
This doesn't work:
{#each navItems as page}
<li><a href="/{$locale}/{page.url}">{page.name}</a></li>
{/each}

This works (as expected):
<li><a href="/{$locale}/item-1">Item 1</a></li>
<li><a href="/{$locale}/item-2">Item 2</a></li>
<li><a href="/{$locale}/item-3">Item 3</a></li>

EDIT: I do want to add that this did work a few months back. Don't know which change triggered this to happen.

Hi @raremiroir, thanks for sharing this.
For me this sounds like a bug with Svelte or your specific implementation. If $locale changes in other parts of the application, then typesafe-i18n works like intended.

Thanks for your quick reply.
I'll look into it further and see if any libs/files conflict. 😉