尝试导入火力基地时出现 vue js 错误"Uncaught SyntaxError: import not found: default"

Question

我正在尝试在vue jsimport 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'，现在是

谢谢。

Answer 1

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

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

这对我有效