Trying to use rollup with firebase ui and ending up with the following etc.
(!) Missing exports
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/firebaseui/dist/esm.js
auth is not exported by node_modules/firebase/app/dist/index.esm.js
rollup config:
import resolve from '#rollup/plugin-node-resolve';
export default [
{
input: 'Firebase.js',
output: {
file: 'Firebase.js',
format: 'es'
},
plugins: [
resolve()
]
}
Firebase.js:
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import * as firebaseui from 'firebaseui'
firebase.initializeApp({...});
var ui = new firebaseui.auth.AuthUI(firebase.auth());
Also tried import firebaseui from 'firebaseui' but no luck.
Sans firebaseui, things work fine, e.g. can rollup a version accessing Firestore just fine.
Related
I encounter a strange behavior with pinia in a Vue3 app.
I created a little app with a pinia store using option API.
Here is my main.js with creating the store :
import { createApp } from "vue";
import { createPinia } from "pinia";
// Vue Router
import index from "./router";
// import { useAspergesStore } from "./store/storeAsperges";
import App from "~/App.vue";
import "~/styles/tailwind.css";
import "~/styles/main.scss";
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.use(index);
app.mount("#app");
Here is my store :
import { defineStore } from 'pinia'
import axios from "axios";
export const useAspergesStore = defineStore('asperges', {
state: () => ({
listeCueilleurs: JSON.parse(localStorage.getItem("listeCueilleurs")) || [],
}),
getters: {
...
},
actions: {
...
},
})
And I call the store from my components :
import { useAspergesStore } from '../../../store/storeAsperges.js';
import { mapStores } from 'pinia';
...
computed: {
...mapStores(useAspergesStore),
},
When I start the web page, I can't get the datas from the store, even on a reload. The store is not loaded.
When I open the devTools in chrome, it doesn't show that the store is loaded.
When I click on the vueDevTools, the store loads and the datas appear in the web page.
I get the message in the console :
"🍍 "asperges" store installed 🆕"
It's like starting the vueDevTools triggers the store. And all work fine after that.
If you have any idea of what I'm doing wrong, any help would be appreciated.
Ok I found a solution. I don't know if it's the right one, but it works.
I just tried to call the store from the component in the mounted() hook and now the store loads correctly.
But anyway, I don't know why the store didn't load even if the datas were used in the components...
I struggle with the correct import of the firebase SDK. I use Vue3 and installed firebase via yarn add firebase
This is my firebase.js file:
import firebase from 'firebase/app';
However, this results in the following error: 1:1 error 'firebase/app' should be listed in the project's dependencies. Run 'npm i -S firebase/app' to add it import/no-extraneous-dependencies
import firebase from 'firebase';
This works, but I get the follwing warning:
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.
For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');
ES Modules:
import firebase from 'firebase/app';
So, first way seems to be recommended, but it does not work out for me. What am I doing wrong?
Update: This seems to be fixed in v2.23.4 (eslint-plugin-import).
Original answer: You're not doing anything wrong. This is a bug, probably related to the package definition in firebase, but it's discussed here inside the eslint rule's repo: https://github.com/benmosher/eslint-plugin-import/issues/2065
You either can use a comment to stop the error from occurring like so:
// eslint-disable-next-line import/no-extraneous-dependencies
import firebase from 'firebase/app';
Or you'll have to wait for the issue to be resolved. Downgrading to v2.22.1 of eslint-plugin-import might also work.
You need to create a config file for firebase and importing firebase here. Then, you
register the module you need and exported it so other file can use it as well.
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import "firebase/storage";
const firebaseConfig = {
// you can get this from your firebase console.
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
};
// init firebase
firebase.initializeApp(firebaseConfig);
// init services
const projectFirestore = firebase.firestore();
const projectAuth = firebase.auth();
const projectStorage = firebase.storage();
export { projectFirestore, projectAuth, projectStorage };
On your other file where you want to use your firebase, you could do something like this to import it.
import { projectAuth } from '../firebase/config'
const user = ref(projectAuth.currentUser)
I currenlty want to start integrating webpack into my js firebase app.
Currently, I have done import * as firebase from 'firebase/app and added my required dependencies after.
However, when I do that, it says that it could not find the modules with an npm not found warning in console.
import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/firestore';
Is there any way to fix this?
This included in multiple files, as they all require firebase.
Thank you very much in advance.
I think, it should be working correctly.
Anyway, here is my solution for importing firebase libraries only once.
I have created single file/class, called FirebaseConnector:
import * as firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/functions';
import AppConfig from 'src/js/config/app_config';
const FUNCTIONS_REGION = 'europe-west1';
class FirebaseConnector {
static initFirebase() {
if (!firebase.apps.length) {
firebase.initializeApp(AppConfig.firebase);
}
}
static getDb() {
FirebaseConnector.initFirebase();
return firebase.firestore();
}
static getFunctions() {
FirebaseConnector.initFirebase();
return firebase.app().functions(FUNCTIONS_REGION);
}
}
export default FirebaseConnector;
Whenever I am using something from the Firebase API, I just import that connector and use objects that returns my FirebaseConnector.getDb() and FirebaseConnector.getFunctions(), eg.:
import FirebaseConnector from './firebase_connector';
// ...
const sendEmail = FirebaseConnector.getFunctions().httpsCallable('sendEmail');
// ...
first time posting here. Also quite new to VueJS, know some Angular.
I ran into an error when initializing Firebase(first time getting this error) in my VueJS project:
That showed up briefly after click event, so I had to slow down my network to take screenshot.
I've included <script src="https://www.gstatic.com/firebasejs/5.5.5/firebase.js"></script> in index.html
I also installed firebase(latest version) via npm with --save
And created 2 files: firebaseInit.js and firebaseConfig.js(which contains the api key, etc for web app):
In firebaseInit.js:
import firebase from 'firebase';
import 'firebase/firestore';
import firebaseConfig from './firebaseConfig';
const firebaseApp=
firebase.initializeApp(firebaseConfig);
export default firebaseApp.firestore();
and put:
export default { the config key value pairs obtained
from Firebase console }
in firebaseConfig.js.
Extra info(though I don't think this is the source of the problem):
I imported firebase with import firebase as 'firebase' in the vue file I used firebase auth() and createUserWithEmailandPassword() in the methods property, but alert() doesn't work.
import firebase from 'firebase';
export default {
name: 'register',
data: function() {
return {
email: '',
password: ''
};
},
methods: {
register: function(e) {
firebase
.auth()
.createUserWithEmailAndPassword(this.email, this.password)
.then(
user => {
alert(`Account made for ${user.email}`);
this.$router.push('/');
},
err => {
console.log(err.message);
}
);
e.preventDefault();
}
}
};
You created your firebaseInit.js but since you never import or require it, is it never executed, thus resulting in a "firebase not initialized" error when you try to use the firebase you imported from the generic firebase module instead.
Use export default firebaseApp in your firebaseInit.js (and not firestore as you do now) and then import firebase from 'path/to/firebaseInit.js' for example.
I use angularfire2 for my Angular web apps and I recently upgraded to the v4.0.0-rc0. It behaves different in a few ways. The thing I need help with is using 'firebase' (the regular Firebase JS library) along side angularfire2 in the v4.0.0 version. In previous versions you would import:
import * as firebase from 'firebase';
and then use the regular Firebase JS library with statements like this:
firebase.database().ref().child("message").set("hi");
That worked fine in prior versions, see this video for more about that approach (it's a requirement when using storage):
https://www.youtube.com/watch?v=nMR_JPfL4qg#t=6m11s
However when I try to do the same thing with v4.0.0-rc0 I get this error message:
Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase
App.initializeApp() (app/no-app).
I can read the message and realize that it thinks that initializeApp hasn't been called. But if I use the angularfire2 v4 code like this...
this.afDatabase.object("somepath").subscribe( (myData: any) => {
console.log("My data", data);
});
that is all fine, since I to the initializeApp in my app.module.ts. So the real issue is that previously the line:
AngularFireModule.initializeApp(environment.firebaseConfig),
worked for both angularfire2 AND the regular Firebase JS library, but now it doesn't. What is the right way to use the regular Firebase JS library for the database now? Do I call firebase.initializeApp in the app.module.ts too? That seems bad to make 2 initializeApp calls of course, but I don't know the right way to do it.
Figured out my issue, I needed to NOT give a custom name within my app.module.ts when I initialized the app. This works fine:
AngularFireModule.initializeApp(environment.firebaseConfig),
This was bad:
AngularFireModule.initializeApp(environment.firebaseConfig, 'myApp'),
you have to put in your import the new implementations modules and put
import * as firebase from 'firebase/app'; in the component where you are gonna use providersvar provider = new firebase.auth.GoogleAuthProvider();
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
export const environment = {
production: false,
firebase: {
apiKey: "dfgdfgdsfgdfgsdfg",
authDomain: "fire-dfgdfg.sdfgdfg.com",
databaseURL: "https://fire-dsfgdfg.dfgdfgdf.com",
projectId: "fire-dfgdfg",
storageBucket: "fire-dfgdfg.appspot.com",
messagingSenderId: "65456456464654"
}
}
#NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
ChartsModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule
],
declarations: [
AppComponent,
FullLayoutComponent,
SimpleLayoutComponent,
ChatLayoutComponent,
NAV_DROPDOWN_DIRECTIVES,
BreadcrumbsComponent,
SIDEBAR_TOGGLE_DIRECTIVES,
AsideToggleDirective
],
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [AppComponent]
})