Comments (9)
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.
- 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 theindex.js
and theen.json
that you can see in the repository linked above. - I added
import './lang'
to the top ofmain.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 ofApp.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 200
ms. 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 issueStorybook.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 :(.
from svelte-i18n.
Related Issues (20)
- `intl-getcanocicallocales` is probably not a good idea HOT 2
- CJS / ESM conflict HOT 22
- Change log version comparison links are off
- Production build using svelte-i18n ^3.7.4 throws "Named export 'IntlMessageFormat' not found." HOT 6
- Problems with LIB check in cli extractor HOT 1
- Sapper reference in Getting Started guide
- Allow to restrict some parts of the i18n file to unauthorized users in SvelteKit. HOT 3
- Is it possible when registering several json files to overwrite the previous key contents with latest file?
- Docs on how to use variables in translation strings HOT 1
- How to disable AM/PM in $time formatter
- Leading zeros for day/month when formatting date values
- Add a register store?
- Build error when deploying in vercel
- Provide a Readable<string> instead of pure string
- Svelte 5 support
- Disable automatic "lang" attribute setting
- Locale not set correctly on some page loads HOT 1
- Different context translations (translation in packages) HOT 2
- Override locale for a given string HOT 1
- Is there any way to check whether a locale is supported/registered?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-i18n.