Firebase 模块导致 Svelte 中的“registerComponent”错误

Question

在我的 svelte 项目中有一个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 应用程序对象，而是一个包含 2 个 firebase 应用程序对象的对象，default一个名为firebase.

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

编辑：我设法通过重建整个项目来解决这个问题，包括汇总配置和 package.json。查看 git 更改，没有应该影响到这一点的差异。

Answer 1

URL 托管不是执行此操作的最佳方式。可以让 firebase 捆绑工作。

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

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

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