Svelte-i18n 与 Snowpack 显示空白页面没有错误

Question

我正在使用 Svelte 3 + Snowpack 3 + Routify + Svelte-i18n。 我没有使用 Sapper。 我用 this template. And this is my repo 安装了所有东西，你可以在其中看到我的所有文件。

我正在关注 svelte-i18n 的 the official tutorial。

问题：我无法使用他们的教程翻译我的页面。我希望它异步工作，因为我会有很多页面的很多翻译。

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

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",
});

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

import { _ } from 'svelte-i18n';

除此之外的一切都与教程完全相同。我怀疑 _layout.svelte 文件中的原因来源，因为我不知道那是什么。根据我的研究，它与 Sapper 有关。我不知道 Snowpack 是否使用它，但也许我需要进行一些更改以使其与 Snowpack 一起使用。此外，看起来教程是在考虑 Sapper 的情况下编写的，因为他们多次称呼它的名字。

Answer 1

如果您打开浏览器的开发人员工具，您会看到您遇到的错误。我在本地运行您的应用程序并看到以下错误：Uncaught (in promise) Error: [svelte-i18n] Cannot format a message without first setting the initial locale.

问题是您正在使用 register 加载词典并试图在词典准备好之前检索消息。此方法 runs asynchronously，因此您的语言环境可能不会在 Svelte 模板呈现时加载。您有两个选择：

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

// 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);

如果您有很多区域设置，这可能会降低性能，因为它们都需要在启动您的应用程序之前加载。

继续异步加载字典并等待它们加载，然后再使用 $isLoading store 检索消息。此存储的值将告诉您检索消息是否安全。

<!-- 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}

Svelte-i18n 与 Snowpack 显示空白页面没有错误

Svelte-i18n with Snowpack shows blank page without errors

svelte

svelte-3

snowpack