ASTRO / Svelte / Rxfire:未找到导出“collectionData”

Question

我试着构建我的天文应用程序。我有一个使用svelte和rxFire的组件，但是当我试图构建id时，我会收到这个错误。尝试该建议，将我带到另一个错误，如“默认成员未导出”。它可以是来自firebase v9的bug，也可以是Vite的编译，但是如何修复它呢？

Package.json

{
  "name": "@example/basics",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/svelte": "^1.0.0",
    "astro": "^1.2.1",
    "firebase": "^9.9.4",
    "rxfire": "^6.0.3",
    "rxjs": "^7.5.6",
    "svelte": "^3.50.1"
  }
}

构成部分：

<script>
  import { collection, query } from "firebase/firestore";
  import { firestore } from "../../firebase";
  import { collectionData } from "rxfire/firestore";
  import { startWith, tap } from "rxjs/operators";
  import OpportunityCard from "./OpportunityCard.svelte";

  const opportunitiesQuery = query(collection(firestore, "opportunities"));

  const opportunities = collectionData(opportunitiesQuery, {idField: "id"}).pipe(
    tap(x => console.log(x)),
    startWith([])
  );
</script>

生成过程中出错：

​

​

采用以下建议：

​

​

Answer 1

这里有些事很奇怪。

在第一种情况下，它应该使用ES模块文件，但使用CommonJS文件。在第二种情况下，它应该使用CommonJS文件，但它使用ES模块文件。

您可以尝试显式指定ES模块文件：

import { collectionData } from 'rxfire/firestore/index.esm.js';
// Or 
import { collectionData } from 'rxfire/firestore/index.esm';