Vue2 webpack-simple集成Firebase9.9.0启动项目报错求助

问题概况 #

• 环境：Vue2 webpack-simple项目，集成Firebase 9.9.0
• 执行npm run dev时触发模块解析错误，报错指向idb/build/index.js中的扩展运算符无法被解析
• 已尝试重新安装firebase@^9.9.0，问题未解决

项目main.js代码 #

import Vue from 'vue'
import App from './App.vue'
import vuetify from "./plugins/vuetify";
import {Vuelidate} from "vuelidate";
import {firestorePlugin} from "vuefire";
import firebase from "firebase/app";

Vue.use(Vuelidate)
Vue.use(firestorePlugin)

import {store} from "../store";
import {router} from "./plugins/routes"


const firebaseConfig = {
  apiKey: "***",
  authDomain: "***",
  projectId: "***",
  storageBucket: "***",
  messagingSenderId: "***",
  appId: "***",
  measurementId: "***"
};

export const db = firebase.initializeApp(firebaseConfig).firestore()

const {Timestamp, GeoPoint} = firebase.firestore()
export {Timestamp, GeoPoint}

db.settings({timestampsInSnapshots: true})

new Vue({
  el: '#app',
  vuetify,
  router,
  store,
  render: h => h(App)
})

报错信息 #

./node_modules/idb/build/index.js
    Module parse failed: Unexpected token (83:4)
    You may need an appropriate loader to handle this file type.
    | }
    | replaceTraps((oldTraps) => ({
    |     ...oldTraps,
    |     get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
    |     has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop),
     @ ./node_modules/@firebase/app/dist/esm/index.esm2017.js 5:0-29
     @ ./node_modules/firebase/app/dist/index.esm.js
     @ ./src/main.js
     @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

错误原因 #

webpack-simple默认的Babel配置会排除node_modules目录下的文件转译，而Firebase 9.x依赖的idb库使用了未转译的ES6+特性（如扩展运算符），导致Webpack无法解析这些语法。另外，旧版vuefire可能和Firebase 9.x的模块化机制不兼容。

解决方法 #

方法1：调整Webpack配置，让Babel处理相关依赖 #

修改项目根目录的webpack.config.js，让Babel转译idb和@firebase相关模块：

module.exports = {
  // ...其他原有配置
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        // 修改exclude规则，排除除idb、@firebase之外的node_modules内容
        exclude: /node_modules(?!\/(idb|@firebase))/
      }
    ]
  }
}

修改后重新执行npm run dev即可。

方法2：降级Firebase版本到兼容旧版vuefire的8.x #

如果不想修改Webpack配置，可以降级Firebase到8.x版本，它和旧版vuefire的兼容性更好：

1. 卸载当前Firebase：

npm uninstall firebase

2. 安装8.x稳定版：

npm install firebase@^8.10.0

3. 保持原main.js代码不变，直接运行项目即可。

方法3：升级vuefire并使用Firebase 9.x模块化导入 #

若想继续使用Firebase 9.x，需要升级vuefire到支持模块化的版本，并调整导入方式：

1. 安装最新版vuefire（支持Vue2和Firebase 9+）：

npm install vuefire@^3.1.0

2. 修改main.js代码为Firebase 9.x的模块化导入方式：

import Vue from 'vue'
import App from './App.vue'
import vuetify from "./plugins/vuetify";
import {Vuelidate} from "vuelidate";
import { firestorePlugin } from 'vuefire'
// Firebase 9.x模块化导入
import { initializeApp } from 'firebase/app'
import { getFirestore, Timestamp, GeoPoint } from 'firebase/firestore'

Vue.use(Vuelidate)
Vue.use(firestorePlugin)

import {store} from "../store";
import {router} from "./plugins/routes"

const firebaseConfig = {
  apiKey: "***",
  authDomain: "***",
  projectId: "***",
  storageBucket: "***",
  messagingSenderId: "***",
  appId: "***",
  measurementId: "***"
};

const app = initializeApp(firebaseConfig)
export const db = getFirestore(app)

export {Timestamp, GeoPoint}

// Firebase 9.x默认启用timestampsInSnapshots，无需额外设置

new Vue({
  el: '#app',
  vuetify,
  router,
  store,
  render: h => h(App)
})

修改后执行npm run dev即可正常启动项目。

内容的提问来源于stack exchange，提问作者Patay Studio