title: vue js error "Uncaught SyntaxError: import not found: default" when trying to import firebase
body: <p>I am trying to import firebase in vue js <code>import firebase from 'firebase/app'</code>, i have installed firebase with npm and I have my version of firebase added to my package.json file.</p>
  <p><code>import firebase from 'firebase'</code> also did not work.</p>
  <p>I have also tried importing firebase from both the App.vue and the main.js file.</p>
  <p>edit.</p>
  <p>Here is my main.js file</p>
  <pre><code>import { createApp } from &quot;vue&quot;;
  import App from &quot;./App.vue&quot;;
  import router from &quot;./router&quot;;
  import firebase from &quot;firebase/app&quot;; // this is creating the error
  import &quot;firebase/firestore&quot;;
  
  const firebaseConfig = {
      apiKey: &quot;AIzaSyDXm6uvYpSzOTZwyg3Ajj16NWGy4AWQly8&quot;,
      authDomain: &quot;vue-js-todolist.firebaseapp.com&quot;,
      projectId: &quot;vue-js-todolist&quot;,
      storageBucket: &quot;vue-js-todolist.appspot.com&quot;,
      messagingSenderId: &quot;611513287554&quot;,
      appId: &quot;1:611513287554:web:42a1fdfe20286d0444459b&quot;,
      measurementId: &quot;G-DF8BW0CKY9&quot;
  };
  
  const firebaseApp = firebase.initializeApp(firebaseConfig);
  
  
  const app = createApp(App);
  app.use(router);
  app.mount(&quot;#app&quot;);
  </code></pre>
  <p>and my App.vue</p>
  <pre><code>&lt;script&gt;
  export default {
    data: ()=&gt; ({
      ...
    }),
    methods: {
      ...
  }
  &lt;/script&gt;
  
  
  &lt;template&gt;
      &lt;div class=&quot;wrapper&quot;&gt;
        &lt;center&gt;
          &lt;div class=&quot;inputHolder&quot; v-if=&quot;addItem&quot;&gt;
            &lt;button class=&quot;btn&quot; @click=&quot;pushItem()&quot;&gt;add item&lt;/button&gt;
            &lt;div class=&quot;input-field col s6&quot;&gt;
              &lt;input v-model=&quot;input&quot; type=&quot;text&quot; class=&quot;validate&quot;  placeholder=&quot;enter todo&quot;&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div class=&quot;inputHolder&quot; v-else&gt;
            &lt;button class=&quot;btn&quot; @click=&quot;pushEditedItem(itemEditing)&quot;&gt;edit item&lt;/button&gt;
            &lt;div class=&quot;input-field col s6&quot;&gt;
              &lt;input v-model=&quot;input&quot; type=&quot;text&quot; class=&quot;validate&quot;&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;h3&gt;
            &lt;ol&gt;
              &lt;b&gt;todo's&lt;/b&gt;
              &lt;li v-for=&quot;(item, index) in testList&quot; :key=&quot;item.listItem&quot;&gt;
                &lt;div class=&quot;listItemHolder&quot;&gt;
                  &lt;button class=&quot;btn&quot; @click=&quot;removeItem(index)&quot;&gt;remove&lt;/button&gt;
                  &lt;button class=&quot;btn&quot; @click=&quot;editItem(index, item.listItem)&quot;&gt;edit&lt;/button&gt;
                  &lt;div style=&quot;max-width: 450px;&quot;&gt;
                    {{item.listItem}}
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/li&gt;
            &lt;/ol&gt;
          &lt;/h3&gt;
        &lt;/center&gt;
  
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;style scoped&gt;
  @import &quot;@/assets/base.css&quot;;
  ...
  &lt;/style&gt;
  </code></pre>
  <p>I have the <code>import firebase from 'firebase/app'</code> in the main.js now</p>
  <p>Thanks.</p>