Firestore (9.0.0-beta.7): INTERNAL UNHANDLED ERROR

[Xstyler85]

Environment:

• Operating System version: Windows 10 - OS build: 19042.1165
• Browser version: Google Chrome - version 92.0.4515.131 (Official Build) (64-bit)
• Firebase SDK version: 9.0.0-beta.7
• Firebase Product: auth, database

When I try to load documents from the firebase everything works, but in the terminal I got this error:

[2021-08-12T17:18:54.450Z]  @firebase/firestore: Firestore (9.0.0-beta.7): INTERNAL UNHANDLED ERROR:  TypeError: Cannot set property _registerComponent of #<Object> which has only a getter
    at vc.createDatastore (/node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js?v=cacba907:13462:96)
    at vc.initialize (/node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js?v=cacba907:13452:31)
    at $c (/node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js?v=cacba907:14025:13)
    at async Fc (/node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js?v=cacba907:14049:5)
    at async qc (/node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js?v=cacba907:14069:15)
    at async eval (/node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js?v=cacba907:14182:7)
(node:22388) UnhandledPromiseRejectionWarning: TypeError: Cannot set property _registerComponent of #<Object> which has only a getter
    at vc.createDatastore (/node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js?v=cacba907:13462:96)
    at vc.initialize (/node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js?v=cacba907:13452:31)
    at $c (/node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js?v=cacba907:14025:13)
    at async Fc (/node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js?v=cacba907:14049:5)
    at async qc (/node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js?v=cacba907:14069:15)
    at async eval (/node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js?v=cacba907:14182:7)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:22388) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:22388) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I'm creating a website with the SvelteKit and no matter how I query the database I always got that error.

This is my firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {...}

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

const auth = firebase.auth();
const db = firebase.firestore();

export { auth, db };

and this is my document.js

import {db} from "../firebase"
import { query, collection, getDocs } from "firebase/firestore"; 

const loadDocuments = async () => {
    try {
        const q = query(collection(db, "documents"));
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
            console.log(doc.id, " => ", doc.data());
        });
    } catch (e) {
        console.error("Error adding document: ", e);
    }
}

loadDocuments()

[jbalidiong]

Hi @Xstyler85, thanks for the report. I tried replicating, but I wasn't able to reproduce the error. I was able to get the doc list using getDocs() of JS SDK v9 without any errors.

The only difference is that I used the version 9.0.0-beta.8. Would you mind trying to update the SDK version that you're using and see if the issue persists?

import { getFirestore, collection, getDocs , query } from "firebase/firestore"
let firebaseFirestore;
 
firebaseFirestore = getFirestore();
 
const loadDocuments = async (e) =>{
try {
const q = query(collection(firebaseFirestore, "cities"));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
console.log(doc.id, " => ", doc.data());
});
} catch (error) {
console.error("Error listing document: ", error);
}
}

[Xstyler85]

Hi @jbalidiong, thank you for helping me.

I created a fresh SvelteKit project with "firebase": "^9.0.0-beta.8"
and added this in __layout.svelte

<script>
	import Header from '$lib/header/Header.svelte';
	import '../app.css';

	import { initializeApp } from 'firebase/app';
	import { getFirestore, collection, getDocs , query } from 'firebase/firestore';

	const firebaseConfig = {
		...
	}

	const firebaseApp = initializeApp(firebaseConfig);
	const db = getFirestore(firebaseApp);

	const loadDocuments = async () => {
		try {
			const q = query(collection(db, "documents"));
			const querySnapshot = await getDocs(q);
			querySnapshot.forEach((doc) => {
				console.log(doc.id, " => ", doc.data());
			});

		} catch (e) {
			console.error("Error adding document: ", e);
		}
	}

	loadDocuments()
</script>

<Header />
<slot />

I successfully get data from the Firestore but the same error in the terminal as before.

Node version: v14.17.3
NPM version: 6.14.13

[Xstyler85]

I found a workaround by @sodatea

svelte.config.js:

const config = {
	kit: {
		target: '#svelte',
		vite: {
			ssr: {
				external: ['firebase']
			}
		}
	},
};

export default config;

Originally posted by @sodatea in #5140 (comment)

[jbalidiong]

Duplicate of 5140.