Vue.js＆amp; Firebase Auth | TwitterAuthProvider不是函数/构造函数

Question

尽管搜索SO /互联网，但我无法解决这个问题。

我试图在我的Vue.js应用（Webpack Starter Template）中连接Firebase Twitter身份验证并遵循官方Firebase文档。

这是我在尝试Twitter身份验证时收到的错误：

Uncaught TypeError: this.$firebase.auth.TwitterAuthProvider is not a constructor
at VueComponent.twitterauth (App.vue?26cd:49)
at boundFn (vue.esm.js?efeb:190)
at invoker (vue.esm.js?efeb:2004)
at HTMLAnchorElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1802)

我将Firebase初始化为/src/main.js中的实例属性：

import firebase from 'firebase'
import 'firebase/firestore'
import 'firebase/auth'
import config from './firebaseconfig'
Vue.prototype.$firebase = firebase.initializeApp(config) 

我的Twitter身份验证功能位于基础/src/App.vue：

<script>
export default {
  name: 'App',
  methods: {
    twitterauth() {
      var provider = new this.$firebase.auth.TwitterAuthProvider();
      return this.$firebase.auth().signInWithPopup(provider).then((result) => {
        alert('success')
      }, (error) => {
        alert('fail')
      })
    }
  }
}
</script>

奇怪的是，我能够在组件/src/components/Main.vue中获取firestore数据：

<template>
  <section>
    <div class="container">
     <h1 class="is-size-3">Newest Setups</h1>
     <p v-for="tool in usertools">
       <em>{{ tool.type }}</em><br />
       <b>{{ tool.tool }}</b><br />
       <em>{{ tool.note }}</em>
     </p>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Main',
  data () {
    return {
      usertools: [],
      loading: true
    }
  },
  created () {
    this.$firebase.firestore().collection('user-tools').get().then((querySnapshot) => {
      this.loading = false
      querySnapshot.forEach((doc) => {
        let data = {
          'type': doc.data().type,
          'tool': doc.data().tool,
          'note': doc.data().note
        }
        this.usertools.push(data)
      })
    })
  }
}
</script>