CODEWITHSUNDEEP
javascriptfirebasevue.js
Dade
Dade

Reputation: 241

Getting TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0__.initializeApp is not a function using Vue3, Firebase 8.5

Trying to use Vue 3 and Firebase 8.5 on a simple app I'm building and I'm getting the error:

TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0__.initializeApp is not a function

Which is coming from my firebaseDb.js file:

import * as firebase from "firebase/app"

const firebaseConfig = {
    apiKey: "something",
    authDomain: "something",
    projectId: "something",
    storageBucket: "something",
    messagingSenderId: "something",
    appId: "something"
}

const firebaseApp = firebase.initializeApp(firebaseConfig);

export const db = firebaseApp.firestore();

Here is the main.js file:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'

createApp(App).use(router).mount('#app')

Here is the create file:

<script>
    import { db } from '../firebaseDb';

    export default {
        data() {
            return {
                property: {
                   address: '',
                   details: '',
                   mlsID: '',
                   price: '',
                   type: '',
                }
            }
        },
        methods: {
            onFormSubmit(event) {
                event.preventDefault()
                db.collection('proprties').add(this.property).then(() => {
                    alert("Property successfully created!");
                    this.property.address = ''
                    this.property.details = ''
                    this.property.mlsID = ''
                    this.property.price = ''
                    this.property.type = ''
                }).catch((error) => {
                    console.log(error);
                });
            }
        }
    }

</script>

I've tried individually importing the modules but that doesn't seem to work either. I've seen some other answers talking about how to correct this error but none have seemed to do the trick. I know there were some breaking changes in Firebase 8.0+ version. I also tried what they recommended to no avail. I'm not sure how to fix this at this point. I'm sure its a simple fix and I have a feeling I'm not importing something I need in the right place is all.

Any help is greatly appreciated.

Upvotes: 0

Views: 92

Answers (1)

Vladimir Shefer
Vladimir Shefer

Reputation: 739

Fix import in your firebaseDb.js file.

import firebase from "firebase";

Upvotes: 1

Related Questions