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

ryexley · 2020-02-28T20:02:45Z

Describe the bug
Having followed the instructions on how to setup the library in a Svelte app, I am seeing an error in the browser console when I try to render a formatted message.

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

To Reproduce
I have created the following code:

// ./src/Shared/lang/index.js
import { init, register, getLocaleFromNavigator } from 'svelte-i18n'

register('en-US', () => import('@Shared/lang/en-US.json'))
// I have other locale files registered as well, but I've commented
// them out temporarily for the sake of trying to get this working

init({
  fallbackLocale: 'en-US',
  initialLocale: getLocaleFromNavigator()
})

// ./src/main.js
import App from '@App/app'
import '@Shared/lang'

const app = new App({
  target: document.body,
  props: {
    global: window
  }
})

window.app = app

export default app

The component that the error seems to be sourced from (the first one in which I am attempting to render a formatted/localied message):

// ./src/Header/MainHeaderNavLinks.svelte
<script>
  import { t, isLoading } from 'svelte-i18n'
</script>

{#if $isLoading}
  <p>Loading</p>
{:else}
  <p>I guess it loaded??</p>
  { $t('components.mainHeaderNavLinks.portfolioLinkLabel') }
{/if}

Expected behavior
I was expecting that it would render my localized message.

Stacktraces

Stack trace

Uncaught Error: [svelte-i18n] Cannot format a message without first setting the initial locale.
at Array.Q (runtime.esm.js:15)
at create_else_block (MainHeaderNavLinks.svelte:176)
at create_fragment (MainHeaderNavLinks.svelte:172)
at init (index.mjs:1384)
at new MainHeaderNavLinks (MainHeaderNavLinks.svelte:172)
at create_fragment (MainHeader.svelte:3)
at init (index.mjs:1384)
at new MainHeader (MainHeader.svelte:3)
at Array.create_else_block (Shell.svelte:4)
at create_fragment (Shell.svelte:49)

Q @ runtime.esm.js:15
create_else_block @ MainHeaderNavLinks.svelte:176
create_fragment @ MainHeaderNavLinks.svelte:172
init @ index.mjs:1384
MainHeaderNavLinks @ MainHeaderNavLinks.svelte:172
create_fragment @ MainHeader.svelte:3
init @ index.mjs:1384
MainHeader @ MainHeader.svelte:3
create_else_block @ Shell.svelte:4
create_fragment @ Shell.svelte:49
init @ index.mjs:1384
Shell @ Shell.svelte:49
create_default_slot @ root.svelte:3
create_slot @ index.mjs:58
create_default_slot @ layout.svelte:3
create_slot @ index.mjs:58
create_fragment @ Provider.svelte:3
init @ index.mjs:1384
Provider @ Provider.svelte:12
create_fragment @ layout.svelte:11
init @ index.mjs:1384
Layout @ layout.svelte:7
create_fragment @ root.svelte:3
init @ index.mjs:1384
Root @ root.svelte:3
./src/main.js @ main.js:6
webpack_require @ bootstrap:63
1 @ main.js:17
webpack_require @ bootstrap:63
(anonymous) @ bootstrap:198
(anonymous) @ bootstrap:198

Information about your project:

Your browser and the version: Google Chrome Version 80.0.3987.122 (Official Build) (64-bit)
Your operating system: MacOS Version 10.14.6 (18G3020)
svelte-i18n version 3.0.1
Webpack (^4.30.0)
svelte-loader (^2.13.3)

The only other unique thing with this project that is different from other svelte projects I've used this library with successfully, is that I am attempting to wire in redux using svelte-redux-connect. I have looked through it's source code and nothing jumped out at me that seems as if it would get in the way of this, but, maybe that has something to with it that I was unable to see. Not real sure.

This is also the first project on which I have tried to use Webpack as well, though again, I'm not sure how that would make things any different.

Additional context
Unfortunately I cannot share this repo, as it is a private repo. If necessary, I could try to put together a separate project to reproduce the issue. What I'm doing is fairly straight forward I think, but, I can't say for sure. I've tried to add as much detail as possible to try to help narrow this down, but I'm pretty baffled. It seems like $isLoading gets updated to true because it attempts to render my components, but then I see the error above in my browser console, as if the locale file didn't actually load.

This seems related to #51, as it appears to be a very similar browser console error.

Any help would be greatly appreciated, thank you.

The text was updated successfully, but these errors were encountered:

kaisermann · 2020-02-28T21:09:03Z

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 😁

ryexley · 2020-03-02T20:42:29Z

@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.

ryexley · 2020-03-05T01:19:05Z

@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.

I created a new svelte project with the webpack template with the following command: npx degit sveltejs/template-webpack svelte-i18n-error
I switched into that directory and ran yarn install to install all dependencies (without issue)
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.
I ran yarn add -D svelte-i18n to install the library
I created a folder src/lang and added the index.js and the en.json that you can see in the repository linked above.
I added import './lang' to the top of main.js in the project
I added import { t } from 'svelte-i18n' to the top of App.svelte`
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?

kaisermann · 2020-03-06T17:12:16Z

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.

bitdom8 · 2021-07-19T18:48:18Z

Subscription following is hard. Thanks for your repo though.

We can make $: to follow variables

andyBobro · 2021-08-30T12:28:31Z

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

7antra · 2022-07-04T11:02:58Z

Same here with vitest :'(

thejaviertc · 2022-12-18T22:42:37Z

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

cgxxv · 2023-06-16T12:35:34Z

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

HenryYangs · 2024-09-25T08:22:55Z

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.

same error in v4.0.0, I have done almost the same thing like ryexley

-------------update--------------
#51 (comment)

this solution is the best

kaisermann closed this as completed in 9d82a98 Mar 6, 2020

kaisermann self-assigned this Mar 6, 2020

kaisermann added the bug Something isn't working label Mar 6, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ryexley commented Feb 28, 2020

kaisermann commented Feb 28, 2020

ryexley commented Mar 2, 2020

ryexley commented Mar 5, 2020

kaisermann commented Mar 6, 2020 •

edited

Loading

bitdom8 commented Jul 19, 2021

andyBobro commented Aug 30, 2021 •

edited

Loading

7antra commented Jul 4, 2022

thejaviertc commented Dec 18, 2022

cgxxv commented Jun 16, 2023

Storybook.svelte - wrapper for every story

preview.js

errors

HenryYangs commented Sep 25, 2024 •

edited

Loading

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

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

Comments

ryexley commented Feb 28, 2020

kaisermann commented Feb 28, 2020

ryexley commented Mar 2, 2020

ryexley commented Mar 5, 2020

kaisermann commented Mar 6, 2020 • edited Loading

bitdom8 commented Jul 19, 2021

andyBobro commented Aug 30, 2021 • edited Loading

Storybook.svelte - wrapper for every story

preview.js

errors

7antra commented Jul 4, 2022

thejaviertc commented Dec 18, 2022

cgxxv commented Jun 16, 2023

Storybook.svelte - wrapper for every story

preview.js

errors

HenryYangs commented Sep 25, 2024 • edited Loading

kaisermann commented Mar 6, 2020 •

edited

Loading

andyBobro commented Aug 30, 2021 •

edited

Loading

HenryYangs commented Sep 25, 2024 •

edited

Loading