As someone coming from an Angular background, I recently started using React and everything was going smoothly until I encountered an error while checking if Firebase is initialized:
TypeError: _assets_Services__Firebase__WEBPACK_IMPORTED_MODULE_11__.default.isInitialised is not a function
Let's take a look at the relevant part of my App.js:
import Firebase from './assets/Services/Firebase';
function App() {
const [isLoggedIn, setLogin] = useState(true)
const [firebaseInitialized, setFirebaseInitialized] = useState(true)
useEffect(() => {
Firebase.isInitialised().then(val => {
setFirebaseInitialized(val)
})
})
And here is a snippet from my Firebase.js file:
class Firebase {
constructor() {
app.initializeApp(firebaseConfig);
this.auth = app.auth();
this.db = app.firestore();
}
isInitialized() {
return new Promise(resolve => {
this.auth.onAuthStateChanged(resolve)
})
}
After some research, I discovered that version mismatch might be causing the issue. Here's a snippet from my package.json:
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",