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');
// ...
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 want to add Firebase's code in my Framework-7 Vue.js app. So that a user can stay logged in even arter exiting the app.
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
store.commit(setSignedIn, true)
} else {
store.commit(setSignedIn, false)
}
});
I need to add this in my app.js of my project:
// Import Vue
import { createApp } from 'vue';
// Import Framework7
import Framework7 from 'framework7/lite-bundle';
// Import Framework7-Vue Plugin
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';
// Import Framework7 Styles
import 'framework7/framework7-bundle.css';
// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.css';
// Import App Component
import App from '../components/app.vue';
import store from '../pages/store/store';
// Init Framework7-Vue Plugin
Framework7.use(Framework7Vue);
// Init App
const app = createApp(App);
app.use(store)
// Register Framework7 Vue components
registerComponents(app);
// Mount the app
app.mount('#app');
Can someone please help me to do this. Thanks
I am using Vuex Persisted State package for such purposes. It is quite simple to add. Try it out.
With Vuex Persisted State your Vuex store will be stored in localStorage so the user won't be logged out after exiting the app.
I am trying to upgrade to RNFirebase 6 from 5 and am going to move all my authentications from firebase.js sdk to RNFirebase and I am not sure why this initialization isn't working. I am using service everywhere so no idea what to be doing differently.
import { firebaseConfig } from '../configs/firebase';
import firebase from '#react-native-firebase/app';
import '#react-native-firebase/auth';
import "#react-native-firebase/database"
import "#react-native-firebase/dynamic-links"
import "#react-native-firebase/firestore"
import "#react-native-firebase/functions"
import "#react-native-firebase/iid"
import "#react-native-firebase/in-app-messaging"
import "#react-native-firebase/messaging"
import "#react-native-firebase/remote-config"
import "#react-native-firebase/storage"
import "#react-native-firebase/database"
import "#react-native-firebase/dynamic-links"
import "#react-native-firebase/firestore"
import "#react-native-firebase/functions"
let instance = null;
class FirebaseService {
constructor() {
if (!instance) {
this.app = firebase.initializeApp(firebaseConfig)
firebase.database().setLoggingEnabled(true);
instance = this;
}
return instance;
}
}
const firebaseService = new FirebaseService().app;
export default firebaseService;
So I didn't realize with React-Native-Firebase none of this initialization is needed. I am not sure why the initializeApp is in the docs or used anywhere. Hopefully this helps someone else out in the future since I banged my head against the wall all day
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.
image of the ERROR
OK so I'm starting a new project and this is the first time that this has happened to me/ I keep getting an error stating ×
TypeError: middleware is not a function i checked dependencies and everything seems fine gone over my code nothing seems wrong please help
I tried deleting the modules and installing them again, I also checked on a passed application I've been doing and since I'm just starting out the code looks identical but that seems to work.
import { createStore, applyMiddleware } from "redux";
import promiseMiddleware from "redux-promise-middleware";
import userReducer from "./ducks/userReducer";
const middleware = applyMiddleware(promiseMiddleware());
const store = createStore(userReducer, middleware);
export default store;
import React, { Component } from "react";
import routes from "./routes";
import { Provider } from "react-redux";
import store from "./redux/store";
class App extends Component {
render() {
return (
<Provider store={store}>
<div className="App">{routes}</div>
</Provider>
);
}
}
export default App;
When you use the function applyMiddleware, the middlewares shouldn't be called as functions.
So instead of:
const middleware = applyMiddleware(promiseMiddleware());
do:
const middleware = applyMiddleware(promiseMiddleware);
See https://redux.js.org/api/applymiddleware#example-custom-logger-middleware for more details.