I encountered an issue with a nextJS app I built on Firebase, following the steps and running the commands mentioned below:
% npx create-next-app@latest
% cd myapp
% firebase experiments:enable webframeworks
% npm install -g firebase-tools
% firebase init hosting
% firebase deploy
% npm i firebase
% firebase --version
13.4.1
This is the content of app/page.tsx:
% cat app/page.tsx
import Image from "next/image";
import LoadData from './components/loadData'
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
Where shall we go ?
<LoadData/>
</main>
);
}
%
Here is the content of app/components/loadData.tsx:
% cat app/components/loadData.tsx
import { useState, useEffect } from 'react';
import firebase from 'firebase/compat/app';
export default function LoadData() {
// const dbRef = firebase.database (This produces no error)
const dbRef = firebase.database()
//const dbRef = firebase.database().ref('Restaurant')//.child('Adventure')
/*dbRef.push().set({
name: 'My favorite one',
phone: '00-6969-1122',
station: '2nd Street North"'
})*/
return (
<div>
LoadData
</div>
)
} /* End of LoadData */
%
And here's the file (initFirebase.tsx):
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/database';
// Note about the following. To be able to log in, only the apiKey is necessary.
// The rest of the information is only useful to access the database.
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_WEB_API_KEY,
projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
databaseURL: process.env.NEXT_PUBLIC_DATABASE_URL
};
firebase.initializeApp(firebaseConfig);
export default firebase;
export {firebaseConfig}
Upon executing the command:
% firebase deploy
This was the response received:
.......
TypeError: e$.database is not a function
......
> Export encountered errors on following paths:
/page: /
Error: An unexpected error has occurred.
After some experimentation, I identified that this line:
const dbRef = firebase.database()
is causing the issue. However, I am unsure how to address it.
Any assistance or relevant guidance would be greatly appreciated.
(Ultimately, my goal is to successfully access my realtime database for read/write operations)