Cannot format a message without first setting the initial locale when open _error route

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",
};

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}