Error: [svelte-i18n] Cannot format a message without first setting the initial locale. about svelte-i18n HOT 9 CLOSED

Same here with vitest :'(

from svelte-i18n.

Same here with vitest :'(

That just happened to me right now. Probably you fixed it but for anyone searching the fix like me 5 minutes ago:

Just import the i18n file (the one that initializes the languages) inside the test that throws the error

from svelte-i18n.

@kaisermann free time, that's the key isn't it, heh. I don't have a ton of that myself, but I will see what I can do re: creating a small repo in which the issue is reproducible. I will ping you here if/when I'm able to do that.

from svelte-i18n.

Hey @ryexley 👋 Thanks for the detailed description! I'll check what may be happening when I get some free time. For now, would you be able to make a small repro of your issue? That would help a lot 😁

from svelte-i18n.

@kaisermann - I was able to take a few minutes to put together a quick-and-dirty project to demonstrate the error I am experiencing here. This is about as bare-bones as I can get it to reproduce the error. Here are the steps I took to create this project.

1. I created a new svelte project with the webpack template with the following command: npx degit sveltejs/template-webpack svelte-i18n-error
2. I switched into that directory and ran yarn install to install all dependencies (without issue)
3. I ran yarn dev to run the project, and it ran without issue, and I was able to see the default "Hello world!" heading in the browser.
4. I ran yarn add -D svelte-i18n to install the library
5. I created a folder src/lang and added the index.js and the en.json that you can see in the repository linked above.
6. I added import './lang' to the top of main.js in the project
7. I added import { t } from 'svelte-i18n' to the top of App.svelte`
8. I added <p>{ $t("test.label") }</p> to the body of App.svelte

Result: when hot reloading updated the app in the browser, I see the following error in my browser dev console:

Hopefully this is helpful for you to maybe pinpoint what I'm doing wrong or what I'm missing?

from svelte-i18n.

Thanks for your repo! That really helped a lot. The main problem was that the $isLoading store was being asynchronously set to true because loadingDelay defaults to 200ms. I just released version 3.0.2 which hopefully fixes this behavior. If there's no current locale (such when setting the initial one), the loadingDelay interval is ignored and $isLoading will now be set to true, preventing the app from breaking.

from svelte-i18n.

Subscription following is hard. Thanks for your repo though.

We can make $: to follow variables

from svelte-i18n.

Hi there!

I've successfully added svelte-i18n to my svelte-vite project, but troubles started when i wanted to integrate with the storybook.

I created the wrapper for the stories and added it to preview.js in storybook config, but have the same issue

Storybook.svelte - wrapper for every story

<script>
  import { addMessages, init, getLocaleFromNavigator, isLoading } from 'svelte-i18n';

  import en from '../../locales/en.js'
  import fi from '../../locales/fi.js'

  addMessages('en', en);
  addMessages('fi', fi);

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

{#if $isLoading}
  Please wait...
{:else}
  <slot />
{/if}

preview.js

import Storybook from 'ui/views/Storybook.svelte';	

export const decorators = [() => Storybook];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

errors

proxy.js:15 [HMR][Svelte] Unrecoverable error in <Payment>: next update will trigger a full reload logError 
@ proxy.js:15

=====

index.js:56 Error: [svelte-i18n] Cannot format a message without first setting the initial locale.
    at Array.K (:6006/node_modules/.vite/svelte-i18n.js?v=86c4ebb4:2074)
    at create_fragment (:6006/src/ui/views/Payment.svelte:25)
    at init (:6006/node_modules/.vite/chunk-77HNZYGF.js?v=86c4ebb4:1648)
    at new Payment (:6006/src/ui/views/Payment.svelte:81)
    at createProxiedComponent (:6006/node_modules/svelte-hmr/runtime/svelte-hooks.js:245)
    at new ProxyComponent (:6006/node_modules/svelte-hmr/runtime/proxy.js:239)
    at new Proxy<Payment> (:6006/node_modules/svelte-hmr/runtime/proxy.js:339)
    at Array.create_default_slot (:6006/src/ui/views/stories/Payment.stories.svelte:26)
    at create_slot (:6006/node_modules/.vite/chunk-77HNZYGF.js?v=86c4ebb4:70)
    at create_if_block (:6006/node_modules/@storybook/addon-svelte-csf/dist/esm/components/Template.svelte:34)
error @ index.js:56

hope anybody can help

from svelte-i18n.

Hi there!

I've successfully added svelte-i18n to my svelte-vite project, but troubles started when i wanted to integrate with the storybook.

I created the wrapper for the stories and added it to preview.js in storybook config, but have the same issue

Storybook.svelte - wrapper for every story

<script>
  import { addMessages, init, getLocaleFromNavigator, isLoading } from 'svelte-i18n';

  import en from '../../locales/en.js'
  import fi from '../../locales/fi.js'

  addMessages('en', en);
  addMessages('fi', fi);

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

{#if $isLoading}
  Please wait...
{:else}
  <slot />
{/if}

preview.js

import Storybook from 'ui/views/Storybook.svelte';	

export const decorators = [() => Storybook];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

errors

proxy.js:15 [HMR][Svelte] Unrecoverable error in <Payment>: next update will trigger a full reload logError 
@ proxy.js:15

=====

index.js:56 Error: [svelte-i18n] Cannot format a message without first setting the initial locale.
    at Array.K (:6006/node_modules/.vite/svelte-i18n.js?v=86c4ebb4:2074)
    at create_fragment (:6006/src/ui/views/Payment.svelte:25)
    at init (:6006/node_modules/.vite/chunk-77HNZYGF.js?v=86c4ebb4:1648)
    at new Payment (:6006/src/ui/views/Payment.svelte:81)
    at createProxiedComponent (:6006/node_modules/svelte-hmr/runtime/svelte-hooks.js:245)
    at new ProxyComponent (:6006/node_modules/svelte-hmr/runtime/proxy.js:239)
    at new Proxy<Payment> (:6006/node_modules/svelte-hmr/runtime/proxy.js:339)
    at Array.create_default_slot (:6006/src/ui/views/stories/Payment.stories.svelte:26)
    at create_slot (:6006/node_modules/.vite/chunk-77HNZYGF.js?v=86c4ebb4:70)
    at create_if_block (:6006/node_modules/@storybook/addon-svelte-csf/dist/esm/components/Template.svelte:34)
error @ index.js:56

hope anybody can help

So, the problem is addMessages is not synchronous, the docs made me confused :(.

@kaisermann

from svelte-i18n.