Struggling to get re-base to recognise my initialized firebase DB

Question

I'm working through some ReactJS tutorials, I've gone through them before but I'm having a bit of a refresh because it's been a while since I've had any reason to use ReactJS at all. Something has changed with firebase / rebase since the last time I looked at it, and the sample code does not do the job I need it to do any more.

This is the code using the compatibility versions of firebase

import Rebase from 're-base';
import firebase from 'firebase/compat/app';
import 'firebase/compat/database';

const firebaseApp = firebase.initializeApp({
  apiKey: "xxx",
  authDomain: "xxx.firebaseapp.com",
  databaseURL: "https://xxx.europe-west1.firebasedatabase.app",
});

const base = Rebase.createClass(firebaseApp.database());

export { firebaseApp }

export default base;

This is the error this approach produces:

TypeError: Cannot read properties of undefined (reading 'database')

This is the firebase V9 approach:

import Rebase from 're-base';
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';

const firebaseApp = initializeApp({
  apiKey: "xxx",
  authDomain: "xxx.firebaseapp.com",
  databaseURL: "https://xxx.europe-west1.firebasedatabase.app",
});

const base = Rebase.createClass(getDatabase(firebaseApp));

export { firebaseApp }

export default base;

This is the error I'm getting for the v9 approach:

REBASE: Rebase.createClass failed. Expected an initialized firebase or firestore database object.

As far as I can tell, the DB initialises fine. I've tried the whole firebase / initialize app / get database steps from within another component and console logged out what looks like a database object to me (but newbie caveats apply here)

What am I missing? Is there some obvious configuration step with the DB that I've overlooked?

How can I confirm that my firebase DB is actually initialized at all? Why is Rebase being such a pain in the backside?

for reference:

firebase: v9.9.4 / rebase: v4.0

Answer 1

@efreeman, your issue is the update to Firebase 9. You need to use Firebase 8.10.0 that is provided in the course starter files .

https://github.com/wesbos/React-For-Beginners-Starter-Files/blob/master/catch-of-the-day/package.json

You can revert your package.json file and re-install the npm packages.

Re-base is not compatible with Firebase 9