时间戳

首页 > 解决方案 > Firebase 模块在 Svelte 中导致“registerComponent”错误

javascript - Firebase 模块在 Svelte 中导致“registerComponent”错误

问题描述

在我的苗条项目中，有一个firebase.js管理 firebase 服务的文件。该文件如下所示：

import firebase from "firebase/app"; // rollup bundle issue with ESM import
import "firebase/firestore";
import "firebase/auth";

const firebaseConfig = {
  // firebase config
};

console.log(firebase);

firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();
export const googleProvider = new firebase.auth.GoogleAuthProvider();

export const db = firebase.firestore();

这工作得很好，但是添加 firebase 模块似乎会导致问题。例如import "firebase/analytics";在firebase auth之后添加一个错误出现在浏览器控制台中

index.esm.js:1301 Uncaught TypeError: Cannot read property 'registerComponent' of undefined
    at registerInstallations (index.esm.js:1301)
    at index.esm.js:1325
    at main.js:6

有问题的文件index.esm.js是@firebase/installations文件，似乎传入的对象registerInstallations(firebase)不是 firebase app 对象，而是一个包含 2 个 firebase app 对象的对象，一个 nameddefault一个 named firebase。

我发现解决此问题的唯一方法是在整个 node_modules 中的多个位置替换对registerInstallations(firebase)with的调用registerInstallations(firebase.firebase)，这似乎不是一个好的解决方案。

编辑：我设法通过重建整个项目来解决这个问题，包括汇总配置和 package.json。纵观 git 更改，没有任何差异会影响这一点。

标签： javascriptfirebasesvelte

解决方案

URL 托管不是最好的方法。可以让 firebase 捆绑工作。

它需要稍微修改rollup.config.js文件。将以下代码添加到汇总配置插件数组为我解决了这个问题。Resolve 导入自@rollup/plugin-node-resolve

resolve({
  browser: true,
  dedupe: (importee) =>
    importee === "svelte" || importee.startsWith("svelte/"),
  mainFields: ["main", "module"],
}),

我在这里的全栈模板中有一个可用的工作版本。只需克隆存储库并仅使用该./frontend文件夹。确保在./frontend/src/services/firebase.js文件中添加您的 Firebase Web 应用配置。

推荐阅读