When using aurelia-cli, in a newly made project, I'm trying to include firebase in my bundle using the following code:
{
"name": "firebase",
"path": "../node_modules/firebase",
"main":"firebase",
"exports": "firebase"
}
Based on their documentation, this should make firebase globally available in my app (similar to $for jQuery).
What's causing this not to work?
In your main.js, try the following:
import firebase from 'firebase';
export function configure(aurelia) {
...
firebase.initializeApp({
apiKey: 'your_api_key',
authDomain: 'your_auth_domain',
databaseURL: 'your_database_url',
storageBucket: 'your_storage_bucket'
});
aurelia.start().then(() => aurelia.setRoot());
}
In app.js:
// Import firebase if the project was created using the Aurelia-CLI
// If you're using the Aurelia Esnext-Skeleton, you don't have to import firebase
import firebase from 'firebase';
export class App {
constructor() {
this.some_ref = firebase.database().ref('some_path');
}
}
Related
I'm building an app with NextJS, NextAuth and Firebase.
While implementing NextAuth, I've encountered this error:
error - FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app).
Here's my code:
[...NextAuth].js
import NextAuth from "next-auth/next";
import GoogleProvider from "next-auth/providers/google";
import { FirestoreAdapter } from "#next-auth/firebase-adapter";
import { db } from "#/firebase/config";
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET,
}),
],
adapter: FirestoreAdapter(db),
});
My firebase config file
import { initializeApp, getApp, getApps } from "firebase/app";
import "firebase/auth";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: ___,
authDomain: ___,
projectId: ___,
storageBucket: ___,
messagingSenderId: ___,
appId: ___,
measurementId: ___,
};
const app =
getApps().length === 0
? initializeApp({ ...firebaseConfig, projectId: firebaseConfig?.projectId })
: getApp();
const db = getFirestore(app);
export { app, db };
As you can see in my config file, I'm testing if an app already exists, but it doesn't seem to work.
I've checked if somebody already had the same problem as me, but I didn't find an answer.
Any idea?
Thanks a lot,
Gabriel
According to the documentation for the Firebase Adapter for NextAuth.js, you should be passing in the configuration object to the adapter directly or an instance of Firestore from the Admin SDK (i.e. using import { getFirestore } from "firebase-admin/firestore").
Initially, you should try removing your "#/firebase/config" import and just use the configuration directly.
import NextAuth from "next-auth/next";
import GoogleProvider from "next-auth/providers/google";
import { FirestoreAdapter } from "#next-auth/firebase-adapter";
const firebaseConfig = {
apiKey: ___,
authDomain: ___,
projectId: ___,
storageBucket: ___,
messagingSenderId: ___,
appId: ___,
measurementId: ___,
};
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET,
}),
],
adapter: FirestoreAdapter(firebaseConfig),
});
This initialization behaviour is defined in the main constructor in src/index.ts and in the initialization utility method in src/utils.ts.
The next step to try would be to make sure your Next.js sources make use of the Firebase Admin SDK instead of the client-side Firebase SDK which behaves differently.
If the above doesn't work, you can look for the more general cause. Sift through your codebase and look for statements that initialize Firebase service providers before your code pulls in "#/firebase/config". Any call to getApp() without any arguments will silently initialize the default FirebaseApp instance.
// NOTE: this is pseudo-code, not the actual implementation
// gets the named/default app, throwing an error if not initialized
export function getApp(name: string = DEFAULT_ENTRY_NAME): FirebaseApp {
const app = _apps.get(name);
if (!app && name === DEFAULT_ENTRY_NAME) return initializeApp(); // <-- this initializeApp is your problem
if (!app) throw new Error(name + " not initialized");
return app;
}
This also applies to calls that initialize a service (e.g. getFirestore()) without any app argument as they also will call getApp() internally.
// NOTE: this is pseudo-code, not the actual implementation
export function getFirestore(app?: FirebaseApp) {
app = app || getApp(); // use given app or use default
return app._providers.get('firestore') || initializeFirestore(app, DEFAULT_SETTINGS)
}
Unfortunately, tracking down this particular problem can be a pain as you module bundler/build tool might be "tree-shaking" the code and stripping what it thinks is unnecessary - which may include your getApp() and getFirestore() calls if you don't use app or db in the local code. Using just import "#/firebase/config" in this case should solve that.
Hey I am pulling my hair out on this one - I have read several posts here but keep getting this error here is my code for init.js
import firebase from "firebase/app"
var config = {
apiKey: "AIzaSyAF2VbjdWbQdsdsdk79nINQV5wdsdBn-uMy844gY7s",
authDomain: "lcarchivewebsite.firebaseapp.com",
databaseURL: "https://lcarchivewebsite.firebaseio.com",
projectId: "lcarchivewebsite",
storageBucket: "lcarchivewebsite.appspot.com",
messagingSenderId: "71812947145517",
appId: "1:718129478445517:web:0284d6bsdsdbb57384c87800c4"
};
firebase.initializeApp(config);
export const firestore = firebase.firestore()
export const db = firebase.database()
export const auth = firebase.auth()
export const storage = firebase.storage()
my component is here:
<template>
<h2>hello</h2>
</template>
<script>
import storage from 'firebase'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
created(){
var storageRef = storage.storage().ref()
var listRef = storageRef.child('2020')
listRef.listAll().then((response) => {console.log(response)})
}
}
</script>
i have installed firebase with npm install --save
here is package.json
"dependencies": {
"firebase": "^7.17.1",
"materialize-css": "^1.0.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"webpack-cli": "^3.3.12"
},
Couple of problems here, the first being that you are importing from the firebase lib in node_modules where you should be importing the storage you exported from your init.js script.
Fix this with
import { storage } from '#/path/to/init.js' // "#" refers to your "src" directory
// snip
var storageRef = storage.ref()
The other problem is that in order to use Firebase features like storage, you need to import those libs. So in init.js...
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'
import 'firebase/firestore'
import 'firebase/storage'
I'm writing my own nuxt plugin for firebase/firestore. I'm loading it in the config with:
plugins: [
'~/plugins/firestore.js',
{ src: '~/plugins/vuex-persist', ssr: false }
],
The file itself looks like this
import Vue from 'vue'
import * as firebase from 'firebase/app';
import 'firebase/firestore';
const config = {
...
}
firebase.initializeApp(config)
const settings = {
timestampsInSnapshots: true
}
const store = firebase.firestore()
store.settings(settings)
class Firestore {
...
}
const firestore = new Firestore()
export default ({ app }, inject) => {
inject('firestore', firestore)
}
When I'm running npm run dev it tries to create a firebase instance on each automatic reload. How can I have it only create this instance once?
Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
You can check firebase.apps to see if its loaded. If your only loading it once, then you can just check the length. If you have multiple then you could check each apps name. Once it helped for me
if (!firebase.apps.length) {
firebase.initializeApp({});
}
Recently started integrating Firebase in my React Native project.
I am using the official Firebase release: https://www.npmjs.com/package/firebase
However when I check the documentation there isn't any specific documentation for react-native only for like typescript etc.
I tried to simply use this on my main page:
import firebase from 'firebase'
var config = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: 'https://xxxxxxxxx.firebaseapp.com/',
databaseURL: 'https://xxxxxxxxx.firebaseio.com',
messagingSenderId: 'xxxxxxxxxx',
debug: true
}
// ini the firebase component
const firebaseRef = firebase.initializeApp(config)
export default class App extends React.Component {
componentDidMount(){
firebase.messaging().getToken()
.then((token) => {
console.warn(token);
});
}
}
However this simple thing just returns an error:
TypeError: undefined is not a function ( evaluating
'_firebase2.default.messaging()')
How could I abord the integration of Firebase Cloud Messaging to just receive notififcations.
You may not have initalised your app, it should look something like this :
const configurationOptions = {
debug: true
};
const Firebase = firebase.initializeApp(configurationOptions);
https://firebase.googleblog.com/2016/01/the-beginners-guide-to-react-native-and_84.html
I am new to using vue-cli a webpack template
I want to use firebase as my database for the vueapp
i have done this to import Firebase into my app
main.js
//imported rest all required packages just dint mention here
import * as firebase from 'firebase'
let config = {
apiKey: " - XXXXXXXXCXCC",
authDomain: "XXXXXXXXX",
databaseURL: "XXXXXCCCX",
storageBucket: "XXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXX"
};
firebase.initializeApp(config);
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
Now in my signup.vue file i have to import the following again
import * as firebase from 'firebase'
In order to use the following in my methods
firebase.auth().createUserWithEmailAndPassword(uEmail, uPassword).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
My question is do i have to import
import * as firebase from 'firebase'
everywhere (i.e in alll vue components script tags to use firebase related methods like
firebase.auth()
firebase.database()
firebase.storage()
or can i import it at one central place and use firebase.method() in any vue component file when needed
You could attach the firebase to the Vue.prototype:
import * as firebase from 'firebase'
let config = {
//
}
Vue.prototype.$firebase = firebase.initializeApp(config)
new Vue({
//
})
Then, use it to the components like this:
this.$firebase.database()
If you want to import it just once, you can simply do in your main.js:
import * as firebase from 'firebase'
window.firebase = firebase
window object is global for webpage and it's normal practice to use it this way.