How to solve the problem of connecting to firebase nuxt.js?

Prompt, please how to solve the problem? Error: Failed to resolve async component default: [DEFAULT]: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

the <script>
 import from Firebase '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: 'Message sent!',
 submit_form: 'Send',
 errors: null
},
 firebaseSave: {
 name: ",
 email: ",
 phone: ",
 message: "
}
}
},
 methods: {
 validateBeforeSubmit () {
 this.$validator.validateall on().then((result) => {
 if (result) {
 // Save messages
messagesRef.push(this.firebaseSave)
 this.firebaseSave.name = "
 this.firebaseSave.email = "
 this.firebaseSave.phone = "
 this.firebaseSave.message = "
....
}
})
}
}
}
</script>


Googled the solution, but to no avail.
if (!Firebase.apps.length) {
Firebase.initializeApp({})
 }

Can someone experienced, please help
June 10th 19 at 16:29
4 answers
June 10th 19 at 16:31
Solution
In nuxt.config.js
vendor: [
'firebase'
 ],

In services/fireinit.js
import * as a from firebase '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
Here I catch the error jslint Expected an assignment or function call and instead saw an expression no-unused-expressions
on the expression !firebase.apps.length ? firebase.initializeApp(config) : " - Gin commented on June 10th 19 at 16:34
eslint of course a good thing but sometimes it is annoying sacamento
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)/
 // })
}
 },
- Ericka.Wiso commented on June 10th 19 at 16:37
Here look at the Gita - Ericka.Wiso commented on June 10th 19 at 16:40
she was already here)
Had jslint commit) - Gin commented on June 10th 19 at 16:43
if to write religion does not allow?:)

if (!firebase.apps.length) {
firebase.initializeApp(config);
}
- genevieve_Upton commented on June 10th 19 at 16:46
I've tried it. The error is similar. Failed to resolve async component default: [DEFAULT]: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app). - Gin commented on June 10th 19 at 16:49
if you have decided, write the solution, please? - Weston_Kul commented on June 10th 19 at 16:52
decided a ternary like this: !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();. - Gin commented on June 10th 19 at 16:55
June 10th 19 at 16:33
can I nexte, connect fairbiz as in view? because the module on github is not working
I'm trying to do it this way
made in a separate file fireinit.js
import from Firebase '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

and the component
June 10th 19 at 16:35
Looked how to connect here:
https://medium.com/codingthesmartway-com-blog/vue-...

But the error was the same.
Helped:

In nuxt.config.js -> build

vendor: [
'firebase'
 ],

and restart the application.
Well strange, I can not help. Error periodically about hearing.
Forgot to unsubscribe. Solved the problem this way: !firebase.apps.length ? firebase.initializeApp(config) : firebase.app(); - Gin commented on June 10th 19 at 16:38
no , I wasn't working, had written.
But I helped to rewrite the routing a bit (not critical for my project) and don't know true or not, but the condition did not write "firebase", and "Firebase". - Ericka.Wiso commented on June 10th 19 at 16:41
try my solution with ternary !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();. - Ericka.Wiso commented on June 10th 19 at 16:44
checked. I have also up and running. - Gin commented on June 10th 19 at 16:47
June 10th 19 at 16:37
This problem occurs due to SSR. If you initialize Firebase in `plugins/`, the script runs on the server and on the client.

My solution:

1. Initialize Firebase in file `plugins/firebase`:

import firebase from "firebase";

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

firebase.initializeApp(config);

const db = firebase.database();

export { db };


2. In the file `nuxt.config.js`:

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


Option ssr: false disables script execution on the server side


3. Use in the component

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
});
}
}
}

Find more questions by tags JavaScriptVue.js