I followed the tutorial on the firebase docs for 'Using Firebase with esbuild'.
My project consists of one .html file and one .mjs file.
The .html file contains:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script type="module" src="dist/index.js"></script>
</body>
</html>
The .mjs file is largely copied from the docs and contains:
import { initializeApp } from "firebase/app";
import { getFirestore, collection, query, where, getDocs, count } from "firebase/firestore/lite";
const firebaseConfig = {
apiKey: "xxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxx.firebaseapp.com",
projectId: "xxxxxxxxx",
storageBucket: "xxxxxxxxx.appspot.com",
messagingSenderId: "0000000000000",
appId: "1:0000000000000:web:0000000000000",
measurementId: "X-XXXXXXXXX"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Firestore and get a reference to the service
const db = getFirestore(app);
const q = query(collection(db, "db_name"), where("created_on", ">=", 1699333200000), where("created_on", "<=", 1699376399999), count());
getDocs(q)
.then(querySnapshot =>
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
})
);
When I run my build task esbuild src/index.mjs --bundle --sourcemap=inline --outdir=dist --allow-overwrite, it creates the dist/index.js file and when I serve the application with a very simple http server, the html file is retrieved and the dist/index.js file is retrieved as well. But then I receive the following error message:
e2._apply is not a function at query (query.ts:175:24)
This error is being thrown from the node_modules/@firebase/firestore/src/lite-api/query.ts.
How can I perform a query with firebase using an esbuild build?