Firebase - 将数据库 url 添加到配置中会破坏构建

Question

Adding databaseURL into firebase-config.ts breaks the build with the following error ReferenceError: Cannot access 'signInWithGoogle' before initialization .

NavBar.tsx

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import { useAppSelector } from '@/redux/hooks/hooks';
import { signInWithGoogle, signOut } from '@/firebase-config';

export default function NavBar() {
  const user = useAppSelector(state => state.rootReducer.userSlice.value);
  return (
    <Box sx={{ flexGrow: 1 }} className="">
      <AppBar position="static">
        <Toolbar>
          ----> <Button color="inherit" onClick={user ? signOut : signInWithGoogle}>{user ? "Logout" : "Login"}</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

firebase-config.ts

// Import the functions you need from the SDKs you need
import { getAnalytics } from "firebase/analytics";
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/database';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "",
  authDomain: "movier-react-ts.firebaseapp.com",
->databaseURL: "https://movier-react-ts-default-rtdb.europe-west1.firebasedatabase.app",
  projectId: "movier-react-ts",
  storageBucket: "movier-react-ts.appspot.com",
  messagingSenderId: "34914144968",
  appId: "1:34914144968:web:8bbf1e4f02beb25c7c4bfd",
  measurementId: "G-9M2EMLFH6Z"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const auth =  firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });
export const signOut = () => auth.signOut();
export const db = firebase.database();
export const signInWithGoogle = () => auth.signInWithPopup(provider);

Answer 1

Downgrading firebase version to 8.10.0 solved the issue