vue js error "Uncaught SyntaxError: import not found: default" when trying to import firebase

Question

I am trying to import firebase in vue js import firebase from 'firebase/app' , i have installed firebase with npm and I have my version of firebase added to my package.json file.

import firebase from 'firebase' also did not work.

I have also tried importing firebase from both the App.vue and the main.js file.

edit.

Here is my main.js file

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import firebase from "firebase/app"; // this is creating the error
import "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyDXm6uvYpSzOTZwyg3Ajj16NWGy4AWQly8",
    authDomain: "vue-js-todolist.firebaseapp.com",
    projectId: "vue-js-todolist",
    storageBucket: "vue-js-todolist.appspot.com",
    messagingSenderId: "611513287554",
    appId: "1:611513287554:web:42a1fdfe20286d0444459b",
    measurementId: "G-DF8BW0CKY9"
};

const firebaseApp = firebase.initializeApp(firebaseConfig);


const app = createApp(App);
app.use(router);
app.mount("#app");

and my App.vue

<script>
export default {
  data: ()=> ({
    ...
  }),
  methods: {
    ...
}
</script>


<template>
    <div class="wrapper">
      <center>
        <div class="inputHolder" v-if="addItem">
          <button class="btn" @click="pushItem()">add item</button>
          <div class="input-field col s6">
            <input v-model="input" type="text" class="validate"  placeholder="enter todo">
          </div>
        </div>
        
        <div class="inputHolder" v-else>
          <button class="btn" @click="pushEditedItem(itemEditing)">edit item</button>
          <div class="input-field col s6">
            <input v-model="input" type="text" class="validate">
          </div>
        </div>

        <h3>
          <ol>
            <b>todo's</b>
            <li v-for="(item, index) in testList" :key="item.listItem">
              <div class="listItemHolder">
                <button class="btn" @click="removeItem(index)">remove</button>
                <button class="btn" @click="editItem(index, item.listItem)">edit</button>
                <div style="max-width: 450px;">
                  {{item.listItem}}
                </div>
              </div>
            </li>
          </ol>
        </h3>
      </center>

    </div>

</template>

<style scoped>
@import "@/assets/base.css";
...
</style>

I have the import firebase from 'firebase/app' in the main.js now

Thanks.

Answer 1

If you are using Firebase v9+ use the /compat folder in imports like so:

 import firebase from 'firebase/compat/app' import 'firebase/compat/firestore'

this worked for me