Vue集成Firebase认证报错：Uncaught SyntaxError: ambiguous indirect export: default

按照教程实现Vue项目的Firebase认证功能，编写了auth.js和main.js代码如下，但运行时出现错误：Uncaught SyntaxError: ambiguous indirect export: default

auth.js #

import firebase from 'firebase'
import firebaseui from 'firebaseui';

const config = {
  apiKey: "AIzaSyBfEKjNqtQRdeRxd1ocNwAQjPMo80MUn70",
  authDomain: "qrpay-23f88.firebaseapp.com",
  databaseURL: "https://qrpay-23f88.firebaseio.com",
  projectId: "qrpay-23f88",
  storageBucket: "qrpay-23f88.appspot.com",
  messagingSenderId: "651606142877"
};

const auth = {
  context: null,
  uiConfig: null,
  ui: null,

  init(context) {
    this.context = context;

    firebase.initializeApp(config);
    this.uiConfig = {
      signInSuccessUrl: 'dashboard',
      signInOptions: [
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ]
    }
    this.ui = new firebaseui.auth.AuthUI(firebase.auth());

    firebase.auth().onAuthStateChanged((user) => {
      this.context.$store.dispatch('user/setCurrentUser')

      let requireAuth = this.context.$route.matched.some(record => record.meta.requireAuth)
      let guestOnly = this.context.$route.matched.some(record => record.meta.guestOnly)

      if(requireAuth && !user) this.context.$router.push('auth')
      else if (guestOnly && user) this.context.$router.push('dashboard')
    });
  },
  authForm(container) {
    this.ui.start(container, this.uiConfig);
  },
  user() {
    return this.context ? firebase.auth().currentUser : null;
  },
  logout() {
    firebase.auth().signOut();
  }
}

export default auth;

main.js #

import Vue from 'vue'

import App from '@/App'

import {router} from '@/router'
import {store} from '@/store'
import auth from '@/auth'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  beforeCreate () {
    auth.init(this)
  },
  template: '<App/>',
  components: { App }
})

这个错误是因为你安装的Firebase版本是v9+（模块化版本），但代码沿用了v8及更早的命名空间写法（import firebase from 'firebase'），两者模块导出方式不兼容导致的。有两种可行解决方式：

方式一：降级到Firebase v8兼容版本 #

如果想保留现有代码结构，直接降级Firebase及FirebaseUI到对应版本：

npm install firebase@8.10.0 firebaseui@6.0.2 --save

安装完成后重启项目即可，无需修改现有代码。

方式二：适配Firebase v9+的模块化写法 #

如果想使用最新版本的Firebase，需要修改auth.js的导入和调用逻辑：

// auth.js
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, signOut, FacebookAuthProvider, GoogleAuthProvider, EmailAuthProvider } from 'firebase/auth';
import * as firebaseui from 'firebaseui';

const config = {
  apiKey: "AIzaSyBfEKjNqtQRdeRxd1ocNwAQjPMo80MUn70",
  authDomain: "qrpay-23f88.firebaseapp.com",
  databaseURL: "https://qrpay-23f88.firebaseio.com",
  projectId: "qrpay-23f88",
  storageBucket: "qrpay-23f88.appspot.com",
  messagingSenderId: "651606142877"
};

const auth = {
  context: null,
  uiConfig: null,
  ui: null,
  firebaseAuth: null,

  init(context) {
    this.context = context;
    const app = initializeApp(config);
    this.firebaseAuth = getAuth(app);
    
    this.uiConfig = {
      signInSuccessUrl: 'dashboard',
      signInOptions: [
        FacebookAuthProvider.PROVIDER_ID,
        GoogleAuthProvider.PROVIDER_ID,
        EmailAuthProvider.PROVIDER_ID
      ]
    };
    this.ui = new firebaseui.auth.AuthUI(this.firebaseAuth);

    onAuthStateChanged(this.firebaseAuth, (user) => {
      this.context.$store.dispatch('user/setCurrentUser')

      let requireAuth = this.context.$route.matched.some(record => record.meta.requireAuth)
      let guestOnly = this.context.$route.matched.some(record => record.meta.guestOnly)

      if(requireAuth && !user) this.context.$router.push('auth')
      else if (guestOnly && user) this.context.$router.push('dashboard')
    });
  },
  authForm(container) {
    this.ui.start(container, this.uiConfig);
  },
  user() {
    return this.context ? this.firebaseAuth.currentUser : null;
  },
  logout() {
    signOut(this.firebaseAuth);
  }
}

export default auth;

修改后确保安装最新版依赖：

npm install firebase firebaseui --save

内容的提问来源于stack exchange，提问作者Aaron Krish