带有 Snowpack 的 Svelte-i18n 显示空白页而没有错误 [英] Svelte-i18n with Snowpack shows blank page without errors

问题描述

我正在使用 Svelte 3 + Snowpack 3 + Routify + Svelte-i18n.我没有使用 Sapper.我用这个模板安装了所有东西.这是我的存储库，您可以在其中查看我的所有文件.

I am using Svelte 3 + Snowpack 3 + Routify + Svelte-i18n. I am not using Sapper. I installed everything with this template. And this is my repo where you can see all my files.

我正在关注官方教程 svelte-i18n.

I am following the official tutorial of svelte-i18n.

问题:我无法使用他们的教程翻译我的页面.我希望它异步工作，因为我将有很多页面的大量翻译.

Problem: I can't translate my page with their tutorial. I want it to work async because I will have lots of translations for lots of pages.

但是当我在我的 .svelte 文件中使用这个脚本时，它就可以正常工作:

But when I use this script in my .svelte file it just works:

import { _ } from 'svelte-i18n';
import { addMessages, init } from "svelte-i18n";

import en from "./lang/en.json";
import az from "./lang/az.json";

addMessages("en", en);
addMessages("az", az);

init({
    initialLocale: "az",
});

当我删除它并按照他们的建议仅使用它时，我得到一个没有任何错误的空白屏幕:

When I delete it and use only this as they suggest, I get a blank screen without any error:

import { _ } from 'svelte-i18n';

除此之外的所有内容都与教程完全相同.我怀疑 _layout.svelte 文件中的原因来源，因为我不知道那是为了什么.根据我的研究，它与 Sapper 有关.我不知道 Snowpack 是否使用它，但也许我需要进行一些更改才能使其与 Snowpack 一起使用.此外，看起来本教程是为了 Sapper 而写的，因为他们多次呼唤它的名字.

Everything other than that is exactly the same as the tutorial. I suspect the source of reason in _layout.svelte file as I don't know what is that for. And as my researches, it is something related to Sapper. I don't know if Snowpack uses it but maybe I need to make some changes to make it work with Snowpack. Also, it looks like the tutorial is written Sapper in mind as they call its name several times.

推荐答案

如果您打开浏览器的开发人员工具，您会看到出现的错误.我在本地运行您的应用程序并看到以下错误:Uncaught (in promise) Error: [svelte-i18n] 无法在未先设置初始语言环境的情况下格式化消息.

You can see the error that you are getting if you open your browser's developer tools. I ran your app locally and saw the following error: Uncaught (in promise) Error: [svelte-i18n] Cannot format a message without first setting the initial locale.

问题在于您正在使用 register 加载您的词典并尝试在词典准备好之前检索消息.此方法异步运行，因此在 Svelte 模板呈现时可能不会加载您的语言环境.您有两个选择:

The issue is that you are using register to load your dictionaries and trying to retrieve messages before the dictionaries are ready. This method runs asynchronously, so your locales might not be loaded by the time the Svelte template renders. You have two options:

1. 使用入口点中的 addMessages 同步加载字典.这样您就不必等待字典加载来检索消息.

1. Load the dictionaries synchronously using addMessages in your entry point. This way you don't have to wait for the dictionaries to load in order to retrieve messages.

// index.js
import { register, init, getLocaleFromNavigator, addMessages } from 'svelte-i18n';
import en from './pages/lang/en.json'
import az from './pages/lang/az.json'
addMessages('en', en);
addMessages('az', az);

如果您有很多语言环境，这可能会降低性能，因为它们都需要在启动您的应用之前加载.

This could be less performant if you have a lot of locales since they would all need to be loaded before starting your app.

1. 在使用 $isLoading 存储.此存储区的值会告诉您检索消息是否安全.

<!-- index.svelte -->
<script>
    import { _, isLoading } from 'svelte-i18n';
</script>

{#if $isLoading}
    <p>Loading</p>
{:else}
    <h1 class="mx-auto mb-10 font-semibold text-4xl text-shadow text-gray-900">{$_('home.hero-h')}</h1>
    <h5 class="text-gray-700 mb-12">{$_('home.hero-p')}</h5>
{/if}

这篇关于带有 Snowpack 的 Svelte-i18n 显示空白页而没有错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！