import/export app.svelte 内容时，Svelte 应用程序显示空白页面

Question

我正在使用 svelte 和 firebase 开发网页。
svelte 模板 (https://github.com/sveltejs/template) 提供的第一个 'Hello World!' 页面运行良好。顺便说一句，我正在关注 this Youtube 视频。
所以问题是当我修改 App.svelte，尤其是脚本部分时，正如视频所说，然后除了空白页什么都没有。它有网站图标和标题，但页面上没有任何内容。当我导入或导出某些东西时会发生这种情况。
我检查了当我将 firebase.js 文件添加到 scr 文件夹而不是将 import { db } from './firebase.js'; 添加到 App.svelte 中的脚本时，它仍然有效。所以不是js文件的问题，是app.svelte.
而且我没有修改项目文件夹中的任何其他文件。我所做的只是创建 firebase.js 文件并修改 app.svelte 文件。
app.svelte中的代码如下：

<script>
    import { db } from './firebase.js';
    let arrTest = [];
    db.collection("testdoc").onSnapshot(snapData => {
        arrTest = snapData.docs
    })
</script>

<main>
    <h1>Welcome to the page!</h1>
    <ul>
        {#each arrTest as testdocItem}
            <li>{testdocItem.data().name}</li>
        {/each}
    </ul>
</main>

<style>
...
</style>

和 firebase.js 文件供参考：

import firebase from 'firebase/app'
import 'firebase/firestore'

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
    apiKey: "~",
    authDomain: "~",
    projectId: "~",
    storageBucket: "~",
    messagingSenderId: "~",
    appId: "~",
    measurementId: "~"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

export const db = firebase.firestore();

提前致谢。

更新：我试过直接把Firebase配置代码放到App.svelte的脚本里，不行。

Answer 1

如您所见，您遇到了无法初始化 Analytics 的错误。

选中此框只是在您的代码中使用 Analytics 的第一步，您还必须导入 SDK，而您目前没有这样做。

因此，删除分析调用的替代方法是添加：

import 'firebase/analytics'

import/export app.svelte 内容时，Svelte 应用程序显示空白页面

Svelte app shows a blank page when import/export something to app.svelte

javascript

localhost

firebase

svelte