尝试导入firebase时vue js错误\“未捕获的语法错误：找不到导入：默认\”答案

【问题标题】：vue js error "Uncaught SyntaxError: import not found: default" when trying to import firebase尝试导入firebase时vue js错误\“未捕获的语法错误：找不到导入：默认\”
【发布时间】：2022-08-16 21:33:37
【问题描述】：

我正在尝试在 vue js import firebase from \'firebase/app\' 中导入 firebase，我已经使用 npm 安装了 firebase，并且我的 firebase 版本已添加到我的 package.json 文件中。

import firebase from \'firebase\' 也没有工作。

我还尝试从 App.vue 和 main.js 文件中导入 firebase。

编辑。

这是我的 main.js 文件

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\");

和我的 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>

我现在在 main.js 中有 import firebase from \'firebase/app\'

谢谢。

你能分享你的App.vue 和main.js 文件吗？如果你有一个专门用于 Firebase 配置的字段，请也分享它。

标签： javascript firebase vue.js import

【解决方案1】：

如果您使用 Firebase v9+，请在导入中使用 /compat 文件夹，如下所示：

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

这对我有用

【讨论】：