Похоже, вы используете сборку Firebase JS SDK для разработки

Question

Я пытаюсь добавить логин в Твиттере, используя Firebase и Vue .js / Vuex для моего приложения. Однако я уже сталкивался с этой ошибкой и исправил ее простым импортом. Тем не менее, это не работает. Есть идеи?

Ошибка:

Похоже, вы используете сборку Firebase JS SDK. При развертывании приложений Firebase в рабочей среде рекомендуется импортировать только отдельные компоненты SDK, которые вы собираетесь использовать.

Для сборок модуля они доступны следующим образом (замените на имя компонента, т.е. auth, database, et c):

Common JS Модули: const firebase = require ('firebase / app'); require ('firebase /');

ES Modules: импортировать firebase из 'firebase / app'; import 'Firebase /';

Машинопись: импорт * как FireBase из «FireBase / приложение»; import 'Firebase /';

Код:

main. js

import Vue from 'vue'
import App from './App'
import router from './router/index'
import {store} from './vuex/store'

import PaperDashboard from './plugins/paperDashboard'
import 'vue-notifyjs/themes/default.css'
import * as firebase from 'firebase'
import Vuex from "vuex"
import {config} from './firebaseConfig'
import 'firebase/analytics'
import 'firebase/database' // If using Firebase database
import 'firebase/storage'
// Add the Firebase products that you want to use
import 'firebase/auth'
import 'firebase/firestore'

firebase.initializeApp(config)
Vue.use(Vuex)
Vue.use(PaperDashboard);

Vue.config.productionTip = false

/* eslint-disable no-new */

/* eslint-disable no-new */
const check = firebase.auth().onAuthStateChanged((user) => {
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>',
    store,
    created() {
      if (user) {
        store.dispatch('autoSignIn', user)
      }
    }
  })
  check()
})

index. js

import Vue from "vue";
import VueRouter from "vue-router";
import routes from "./routes";
import * as firebase from 'firebase/app';


Vue.use(VueRouter);

// configure router
const router = new VueRouter({
  mode: 'history',
  routes, // short for routes: routes
  linkActiveClass: "active"
});

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) {
    next('/');
  }
  else if (!requiresAuth && currentUser) {
    next('/home');
  }
  else {
    next();
  }
});

export default router;

магазин. js

import Vue from 'vue'
import Vuex from 'vuex'
import * as firebase from 'firebase/app'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        user: null
    },
    getters: {
        user (state) {
            return state.user
        }
    },
    mutations: {
        SET_USER (state, payload) {
            state.user = payload
        },
        LOGOUT (state, payload) {
            state.user = null
        }
    },
    actions: {
        autoSignIn({ commit }, payload) {
            const newUser = {
                userDetails: payload.providerData
            }
            commit('SET_USER', newUser)
        },

        signIn({ commit }) {
            var provider = new firebase.auth.TwitterAuthProvider();
            firebase.auth().signInWithRedirect(provider);
            firebase.auth().getRedirectResult().then(result => {

                // The signed-in user info.
                var user = result.user;
                commit('SET_USER', user)
            }).catch(error => {
                alert(error)
                return
            })
        },
        logout({ commit }) {
            firebase.auth().signOut().then(function () {
                commit('LOGOUT')
            }).catch(function (error) {
                alert(error)
                return
            });

        }
    }
})