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

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.

[thejaviertc]

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

[7antra]

Same here with vitest 😢