问题描述
我正在开发一个带有 svelte 和 firebase 的网页。
第一个“Hello World!” svelte template(https://github.com/sveltejs/template) 提供的页面效果很好。
顺便说一句,我正在关注 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 的脚本中,它不起作用。
解决方法
正如您发现的那样,您收到了一个错误,指出无法初始化 Analytics。
选中该框只是在您的代码中使用 Analytics 的第一步,您还必须导入 SDK,而您目前没有这样做。
因此,删除分析调用的替代方法是添加:
import 'firebase/analytics'