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

Question

[Martovitskiy]

Подскажите, пожалуйста как решить проблему? Возникает ошибка: 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({})
  }

Может кто то сталкивался, прошу помочь

Answer 1

[Виктор Л]

В 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

Comments

[Martovitskiy]

Тут ловлю ошибку jslint Expected an assignment or function call and instead saw an expression no-unused-expressions
на выражении !firebase.apps.length ? firebase.initializeApp(config) : ''

[Виктор Л]

eslint конечно хорошая штука но иногда она раздражает закоменти

build: {
    vendor: ['axios'],
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        // config.module.rules.push({
        //   enforce: 'pre',
        //   test: /\.(js|vue)$/,
        //   loader: 'eslint-loader',
        //   exclude: /(node_modules)/
        // })
      }
    },

[Виктор Л]

Вот на гите посмотри

[Martovitskiy]

Виктор, та был уже и тут)
Пришлось jslint закоммитить)

[Константин Китманов]

Виктор, if написать религия не позволяет?:)

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

[Martovitskiy]

Константин Китманов, пробовал. Ошибка аналогична. Failed to resolve async component default: [DEFAULT]: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

[Никита Котенко]

если решили, напишите решение, пожалуйста?

[Martovitskiy]

Никита Котенко, решил тернарным так: !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();.

Answer 2

[Дмитрий Захаров]

Данная проблема возникает из-за 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
        });
      }
  }
}

Answer 3

[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

а в самом компоненте

Answer 4

[Человек]

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

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

В nuxt.config.js -> build

vendor: [
    'firebase'
  ],

и перезапустить приложение.

Comments

[Martovitskiy]

Человек, Ну странно, мне не помогло. Ошибка периодически о себе напоминала.
Забыл отписаться. Решил проблему так: !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();

[Человек]

Martovitskiy, нет, мне тоже не помогло, рано написал.
Но мне помогло переписать роутинг немного (не критично для моего проекта) и не знаю правда или нет, но еще в условии написал не "firebase", а "Firebase".

[Martovitskiy]

Человек, попробуйте мой вариант решения с тернарным !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();.

[Человек]

Martovitskiy, проверил. У меня также и работает.