Cannot format a message without first setting the initial locale when open _error route about svelte-i18n HOT 15 CLOSED

For everyone coming across this issue using svelte@next. Here is my solution for now.
Note that this is not prerendered at build-time.

routes/$layout.svelte

<script context="module">
  // is not working atm for routes/* and on reload with snowpack
  // export async function preload() {
  //   return waitLocale();
  // }
</script>

<script>
  import NavBar from "../components/navbar/Navbar.svelte";

  import {
    register,
    t,
    init,
    getLocaleFromNavigator,
    isLoading,
  } from "svelte-i18n";

  // note it's ending is .json, while the filename in static/ is  .json.js
  register("en", () => import("/lang/en.json"));

  init({ initialLocale: getLocaleFromNavigator(), fallbackLocale: "en" });
</script>

{#if $isLoading}
  Please wait...
{:else}
  {$t("test")}
    <NavBar />
    <main>
      <slot />
    </main>
{/if}

routes/index.svelte

<script>
  import { t } from "svelte-i18n";
</script>

{$t("test")

static/lang/en.json.js

export default {
  test: "test",
};

from svelte-i18n.

For me it was a problem that I use i18n-keys before they where actually initialized, so I needed to await the result:

<script>
    import {
        register,
        init,
        _
    } from 'svelte-i18n'
    
    async function setup() {
      register('en', () => import('@/i18n/en.json'))
      
      return await Promise.allSettled([
        // TODO: add some more stuff you want to init ...
        init({ initialLocale: 'en', fallbackLocale: 'en' })
      ])
    }

    const setupResult = setup()
</script>

{#await setupResult}
	<!-- <p>...show loading animation</p> -->
{:then}
  <h1>{$_('setup.max_players')}</h1>
{:catch error}
	<!-- <p style="color: red">{error.message}</p> -->
{/await}

from svelte-i18n.

As @jayk09 stated, the current solution is to use the isLoading store to check if the library is still loading the messages while we don't have preload support in error pages. You can also wrap your _layout.svelte content with a loading state.

from svelte-i18n.

Hey @aksenovdev and @AlexanderBelkevich 👋 It seems that when going to an error page, the _layout.svelte preload method is not accounted for. This is happening because the locale lazy loading is ending AFTER the error page is rendered. Will try to get back to you if I find some solution to this. I'm not sure if this is a known sapper behavior or a bug.

from svelte-i18n.

i was getting the same error until i used https://github.com/kaisermann/svelte-i18n/blob/master/docs/Locale.md#isloading

from svelte-i18n.

I had the same issue, adding this worked for me:

import { dictionary, locale, _, init} from 'svelte-i18n';

init({
    fallbackLocale: 'en',
    initialLocale: 'en',
})

Note that I have only one locale for now.

from svelte-i18n.

I'm seeing the same issue, with sapper, on first load of a page. The first time I open the app in my browser I get this error, when reloading or even closing the browser & reoping the page everything works as expected.

Can't reproduce in dev on a local machine, only when running as a google App Engine.

from svelte-i18n.

For everyone coming across this issue using svelte@next. Here is my solution for now.
Note that this is not prerendered at build-time.

routes/$layout.svelte

<script context="module">
  // is not working atm for routes/* and on reload with snowpack
  // export async function preload() {
  //   return waitLocale();
  // }
</script>

<script>
  import NavBar from "../components/navbar/Navbar.svelte";

  import {
    register,
    t,
    init,
    getLocaleFromNavigator,
    isLoading,
  } from "svelte-i18n";

  // note it's ending is .json, while the filename in static/ is  .json.js
  register("en", () => import("/lang/en.json"));

  init({ initialLocale: getLocaleFromNavigator(), fallbackLocale: "en" });
</script>

{#if $isLoading}
  Please wait...
{:else}
  {$t("test")}
    <NavBar />
    <main>
      <slot />
    </main>
{/if}

routes/index.svelte

<script>
  import { t } from "svelte-i18n";
</script>

{$t("test")

static/lang/en.json.js

export default {
  test: "test",
};

Can you explain why can't we load it async instead of waiting for all the translations to be ready at this point?

from svelte-i18n.

For me it was a problem that I use i18n-keys before they where actually initialized, so I needed to await the result:

<script>
    import {
        register,
        init,
        _
    } from 'svelte-i18n'
    
    async function setup() {
      register('en', () => import('@/i18n/en.json'))
      
      return await Promise.allSettled([
        // TODO: add some more stuff you want to init ...
        init({ initialLocale: 'en', fallbackLocale: 'en' })
      ])
    }

    const setupResult = setup()
</script>

{#await setupResult}
	<!-- <p>...show loading animation</p> -->
{:then}
  <h1>{$_('setup.max_players')}</h1>
{:catch error}
	<!-- <p style="color: red">{error.message}</p> -->
{/await}

The best solution for me. Otherwise it will have too much duplicated code.

from svelte-i18n.

I also get the same error...

from svelte-i18n.

@kaisermann I have this error without sapper, on clear svelte

from svelte-i18n.

Would you be able to provide a repro project?

from svelte-i18n.

Same issue here, this also happens in the included example in the repo. If you run the example and go to a non existent page, you will find the error popping up in the console.

[svelte-i18n] Cannot format a message without first setting the initial locale.

from svelte-i18n.

Same issue here. Had to remove all translated $_ from the error page to fix it temporarily. Maybe someone has a better option.

from svelte-i18n.

I had the same issue, adding this worked for me:

import { dictionary, locale, _, init} from 'svelte-i18n';

init({
    fallbackLocale: 'en',
    initialLocale: 'en',
})

Note that I have only one locale for now.

Adding this code in the <script> tag of _error.svelte doesn’t seem to make it work for me… 😕

from svelte-i18n.