带有 Snowpack 的 Svelte-i18n 显示空白页而没有错误

问题描述

我正在使用 Svelte 3 + Snowpack 3 + Routify + Svelte-i18n。 我没有使用 Sapper。 我用 this template 安装了所有东西。这是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 而写的，因为他们多次呼唤它的名字。

解决方法

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

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

1. 在入口点使用 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);

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

2. 继续异步加载字典，并在使用 $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}