Why after bundling the following code with Webpack I can't make a request to the Firebase Datab-CodePudding

I am trying to write some code that will be making a request to a firebase database, but it just doesn't work:

import { firebaseApp } from './firebase_config';
import {
    getDatabase,
    onDatabaseChanged,
    ref,
    orderByChild
} from 'firebase/database';
const database = getDatabase(firebaseApp);
...
const wbRef = ref(database, 'collections');
wbRef.orderByChild('field1').equalTo('value1').once('value', (snapshot) => {
  const data = snapshot.val();
...
});

After bundling the code I use it in my browser extension and I get an error e.g. wbRef.orderByChild is not a function

I have tried different alternatives for the following lines of code:

const wbRef = ref(database, 'collections');
wbRef.orderByChild('field1').equalTo('value1').once('value', (snapshot) => {
  const data = snapshot.val();

No matter what alternatives I write I always get x is not a function or y not defined

CodePudding user response：

You're using the Firebase v9 or later SDK, which uses a new modular syntax with top-level functions, rather than the namespaced method calls from v8 and before. You can't mix and match these syntaxes though, as your code is doing.

To run a query with the v9 syntax:

const wbRef = ref(database, 'collections');
const query = query(wbRef, orderByChild('field1'), equalTo('value1'))

get(query).then((snapshot) => {
  const data = snapshot.val();
  ...

Don't forget to add the new functions this uses to your import statement.