Martovitskiy
@Martovitskiy

Как решить проблему подключения firebase в nuxt.js?

Подскажите, пожалуйста как решить проблему? Возникает ошибка: Failed to resolve async component default: [DEFAULT]: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

<script>
  import Firebase from 'firebase'

  // Initialize Firebase
  let config = {
    apiKey: '....',
    authDomain: '....',
    databaseURL: '...',
    projectId: '...',
    storageBucket: '',
    messagingSenderId: '...'
  }
  let app = Firebase.initializeApp(config)

  // Reference messages collection

  let db = app.database()

  let messagesRef = db.ref('messages')

  export default {
    name: 'scopes-example',
    firebase: {
      messages: messagesRef
    },
    validator: null,
    data () {
      return {
        form: {
          name: '',
          tel: '',
          text: '',
          email: '',
          send: '',
          alert: 'Сообщение отправлено!',
          submit_form: 'Оправить',
          errors: null
        },
        firebaseSave: {
          name: '',
          email: '',
          phone: '',
          message: ''
        }
      }
    },
    methods: {
      validateBeforeSubmit () {
        this.$validator.validateAll().then((result) => {
          if (result) {
            // Save messages
            messagesRef.push(this.firebaseSave)
            this.firebaseSave.name = ''
            this.firebaseSave.email = ''
            this.firebaseSave.phone = ''
            this.firebaseSave.message = ''
         ....
          }
        })
      }
    }
  }
</script>


Нашел в гугле решение, но не помогло.
if (!Firebase.apps.length) {
    Firebase.initializeApp({})
  }

Может кто то сталкивался, прошу помочь
  • Вопрос задан
  • 1514 просмотров
Решения вопроса 1
Fzero0
@Fzero0
Вечный студент
В nuxt.config.js
vendor: [
    'firebase'
  ],

В services/fireinit.js
import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'

var config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "233455844395"
};

!firebase.apps.length ? firebase.initializeApp(config) : ''
export const GoogleProvider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();
export const DB = firebase.database();
export default firebase
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Данная проблема возникает из-за SSR. Если вы инициализируете Firebase в `plugins/`, то скрипт выполняется и на сервере и на клиенте.

Мое решение:

1. Инициализируем Firebase в файле `plugins/firebase`:

import firebase from "firebase";

const config = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "..."
};

firebase.initializeApp(config);

const db = firebase.database();

export { db };


2. В файле `nuxt.config.js`:

/*
 ** Plugins
*/
plugins: [
    { src: '~/plugins/firebase', ssr: false }
]


Опция ssr: false отключает выполнение скрипта на стороне сервера


3. Использование в компоненте

import SectionHero from '~/components/sections/Hero.vue';
import SectionAboutUs from '~/components/sections/AboutUs.vue';
import { db } from '~/plugins/firebase.js';

export default {
  components: {
    SectionHero,
    SectionAboutUs
  },
  methods: {
      addCar: function () {
        db.ref('cars/fiat').set({
          model: "Fiat Ducato",
          year: 2017,
          active: false
        });
      }
  }
}
Ответ написан
Комментировать
@Uliana25
а можно в наксте, подключить фаербейз как во вью? потому что модуль на гитхабе не работает
я пытаюсь это сделать таким образом
вынесла в отдельный файл fireinit.js
import Firebase from 'firebase'

var config = {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: ',
storageBucket: '',
messagingSenderId: ''
}
// eslint-disable-next-line
let app = Firebase.initializeApp(config)
let db = app.database()
let orderRef = db.ref('orders')
export default orderRef

а в самом компоненте
Ответ написан
Комментировать
khlopchyna
@khlopchyna
Смотрел как правильно подключать здесь:
https://medium.com/codingthesmartway-com-blog/vue-...

Но ошибка была такая же.
Помогло:

В nuxt.config.js -> build

vendor: [
    'firebase'
  ],

и перезапустить приложение.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы