Javascript Firebase模块导致'；注册组件&x27；苗条误差_Javascript_Firebase_Svelte

Javascript Firebase模块导致'；注册组件&x27；苗条误差

javascript firebase

Javascript Firebase模块导致'；注册组件&x27；苗条误差,javascript,firebase,svelte,Javascript,Firebase,Svelte,在我的svelte项目中，有一个管理firebase服务的firebase.js文件。该文件如下所示： import firebase from "firebase/app"; // rollup bundle issue with ESM import import "firebase/firestore"; import "firebase/auth"; const firebaseConfig = { // firebase

在我的svelte项目中，有一个管理firebase服务的

firebase.js

文件。该文件如下所示：

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模块似乎会引起问题。 e、 g.添加

导入“firebase/analytics”firebase身份验证后，浏览器控制台中会出现错误
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应用程序对象，而是包含两个firebase应用程序对象的对象，一个名为default
，另一个名为firebase

我发现解决这一问题的唯一方法是在节点模块的多个位置将对registerInstallations（firebase）
的调用替换为registerInstallations（firebase.firebase）
，这似乎不是一个好的解决方案
编辑：我通过重建整个项目，包括rollup配置和package.json，成功地解决了这个问题。通过查看git的更改，没有影响这一点的差异。
这是我的HTML。我使用RxFire/RxJs访问firestore
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="author" content="voscausa">
  <meta name="viewport" content="width=device-width, , initial-scale=1.0">
  <title>my-project</title>
  <link rel='stylesheet' href='global.css'>
  <link rel='stylesheet' href='/build/bundle.css'>
</head>
<body>
  <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js" defer></script>
  <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-auth.js" defer></script>
  <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-firestore.js" defer></script>
  <script src='/build/bundle.js' defer></script>
</body>
</html>

URL托管不是最好的方法。可以让firebase捆绑工作
它需要稍微修改rollup.config.js
文件。将以下代码添加到汇总配置插件数组中，为我解决了这个问题。解析是从@rollup/plugin节点解析导入的
resolve({
  browser: true,
  dedupe: (importee) =>
    importee === "svelte" || importee.startsWith("svelte/"),
  mainFields: ["main", "module"],
}),

我的电脑中有一个可用的工作版本。只需克隆repo并仅使用/frontend
文件夹。确保在/frontend/src/services/firebase.js
文件中添加firebase web应用程序配置。我在firebase模块方面也遇到了一些问题。现在我正在使用托管URL。工作正常，并限制了项目构建。在绑定之前，您是如何让svelte加载firebase URL的？还是你用了一堆回调？不是我希望的解决方案。。。想要一个自己的包裹…谢谢！救了我的命
resolve({
  browser: true,
  dedupe: (importee) =>
    importee === "svelte" || importee.startsWith("svelte/"),
  mainFields: ["main", "module"],
}),