ASTRO / Svelte / Rxfire: Named export 'collectionData' not found

Question

I try to build my astro application. I have one component using svelte and rxFire, but when i try to build id, i receive this error. Try the suggestion bring me to another error like "default member is not exported". It can be a bug from firebase v9 and the compilation from Vite, but how to fix it ?

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"
  }
}

Component:

<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>

Error during build:

Apply the suggestion:

Answer 1

Something is rather odd here.

In the first case it is supposed to use the ES module file but uses the CommonJS file. In the second case it is supposed to use the CommonJS file, but it uses the ES module file.

You could try to explicitly specify the ES module file:

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