In my React Native project I'm migrating react-native-firebase from version 5 to version 6 using this guide. In the Specific Module Installation section it says to import the functions module using #react-native-firebase/functions and then to import them with import functions from '#react-native-firebase/functions';. However, when I try to update this code:
import * as functions from 'firebase-functions';
import { FeedModel } from '../../../models/feed.model';
export const onFeedCreate = functions.firestore
.document('promos/{uid}')
.onCreate( async (
snapshot,
context
) => {
const promo = snapshot.data() as FeedModel;
console.log(promo);
});
by replacing the first line with #react-native-firebase/functions';, then the term firestore on the third line is underlined in red and says Property 'firestore' does not exist on type 'FirebaseModuleWithStaticsAndApp<Module, Statics>'.
How should I change my imports in order to run this function?
Related
src\firebaseConnection.js
Line 17:17: 'initializeApp' is not defined no-undef
Search for the keywords to learn more about each error.
webpack compiled with 1 error and 1 warning
enter image description here
You should import like this:
import { initializeApp } from "firebase/app";
const firebaseConfig = {...};
const app = initializeApp(firebaseConfig);
You may want to visit this documentation and learn how to use Firebase Services such as Firestore.
Tried this link and created my first store in Quasar using Pinia, I also needed to change the .quasar/app.js manually to add the Pinia store and to make Pinia functional.
import { Quasar } from 'quasar'
import { markRaw } from 'vue'
import RootComponent from 'app/src/App.vue'
import createStore from 'app/src/stores/index'
import createRouter from 'app/src/router/index'
export default async function (createAppFn, quasarUserOptions) {
// Create the app instance.
// Here we inject into it the Quasar UI, the router & possibly the store.
const app = createAppFn(RootComponent)
app.config.devtools = true
app.use(Quasar, quasarUserOptions)
const store = typeof createStore === 'function'
? await createStore({})
: createStore
app.use(store)
const router = markRaw(
typeof createRouter === 'function'
? await createRouter({store})
: createRouter
)
// make router instance available in store
store.use(({ store }) => { store.router = router })
// Expose the app, the router and the store.
// Note that we are not mounting the app here, since bootstrapping will be
// different depending on whether we are in a browser or on the server.
return {
app,
store,
router
}
}
But the problem is .quasar/app.js is re-written with default contents as soon as quasar dev is executed and again I don't have access to the Pinia stores anymore.
As I said this application was based on vuex formerly.
Make sure you have the index file for pinia.
In "src/stores/index.js"
import { store } from 'quasar/wrappers'
import { createPinia } from 'pinia'
/*
* If not building with SSR mode, you can
* directly export the Store instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Store instance.
*/
export default store((/* { ssrContext } */) => {
const pinia = createPinia()
// You can add Pinia plugins here
// pinia.use(SomePiniaPlugin)
return pinia
})
Try checking quasar info
quasar info
Notice #quasar/app-webpack and vuex.
If you are using #quasar/app, try to move to #quasar/app-webpack by upgrading quasar.
quasar upgrade -i
If you have vuex installed in your quasar info output, try to remove it.
npm uninstall vuex
In your package-lock.json, look for "node_modules/vuex" and delete the key and value.
Then delete your "node_modules" folder and run npm i
After that, run quasar clean.
You may try creating a Pinia store via quasar command to validate it.
quasar new store <store_name>
It should generate a pinia store instead of vuex store.
Problem is older version of #quasar/app-webpack package. It got support for Pinia since v3.4.0. Check release notes here. So basically upgrade this package.
Run quasar upgrade -i and then quasar new store <store_name> [--format ts]
It will create a stores/ directory with pinia.
In my case i didn't need to edit any special files, simply replace the index.js in the stores folder. To get quasar CLI to then use pinia when running quasar new store I had to use quasar clean and just like that I had fully transitioned.
My solution was to remove and reinstall node_modules
This newly installed meteor (1.10.2) by chocolatey on windows 10 followed by meteor create --bare appName then copy/paste some 2 year old code I had parked for a while. Chassing the cause of this runtime error for no avail.
ReferenceError: DataTeckCol is not defined
at server/dataTeck.js:13:1
at module (server/dataTeck.js:20:8)
../server/dataTeck.js
"use strict";
let cheerio = require('cheerio');
import {Matcher} from "./matcher";
import {Dispatcher} from "./dispatcher";
import '../imports/api/dataTeck.js';
DataTeckCol.remove({plateNum: {$in: plates}}); //<<<<<<<< Error line
../imports/api/dataTeck.js
import { Mongo } from 'meteor/mongo';
export const DataTeckCol = new Mongo.Collection('dataTeckCol');
You need to explicitly import the exported const, so instead of
import '../imports/api/dataTeck.js';
you need to import it via
import { DataTeckCol } from '../imports/api/dataTeck.js';
I used Google Analytics a lot for many sites...
I'm just releasing a first app with Firebase (Firestore + Firebase SDK with reactjs).
Then, I activated GA from my Firebase dashboard... but I cannot see any activity !
I probably need not to add plugin like "autotrack" ?
import 'autotrack';
ga('create', 'UA-XXXXX-Y', 'auto');
It's not clear because, it's impossible to find out the track ID (UA-XXXXX-Y) from my dashboard !
Do I really need it ? Where can I find it ?
I did't correctly initialized Analytics...
With firebase it's not a track ID but a measurementId
import app from 'firebase/app';
import 'firebase/analytics';
app.initializeApp({
//other config
measurementId : process.env.REACT_APP_MEASUREMENT_ID,
appId : process.env.REACT_APP_DEV_ID
})
//put inside your constructor
app.analytics()
This will solve the following error:
Error: firebase__WEBPACK_IMPORTED_MODULE_8___default.a.analytics is
not a function react
Documentation : https://firebase.google.com/docs/analytics/get-started?platform=web
The previous answer should be corrected like this:
import app from 'firebase/app';
import 'firebase/analytics';
app.initializeApp({
//other config
measurementId : process.env.REACT_APP_MEASUREMENT_ID,
appId : process.env.REACT_APP_DEV_ID
})
//put inside your constructor
app.analytics()
This will solve the following error:
Error: firebase__WEBPACK_IMPORTED_MODULE_8___default.a.analytics is
not a function react
My issue was the same as listed above:
Error: firebase__WEBPACK_IMPORTED_MODULE_8___default.a.analytics is not a function react
But the resolution was that I forgot to import the analytics module: import 'firebase/analytics';
If you are using Typescript:
// On index.tsx
import { initializeApp } from 'firebase/app';
import { initializeAnalytics } from 'firebase/analytics';
const firebaseConfig = {
... your config object ...
};
const app = initializeApp(firebaseConfig);
initializeAnalytics(app);
Firebase gone through a lot of new updates. Change imports like this;
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/analytics';
Background: I have started using react-native-firebase with react-native to integrate with Cloud Firestore. I'm going to start bringing redux into my test application.
Question - Is react-native-firebase ok to continue with as my choice of libraries here? (versus migrating to react-redux-firebase)
Is there an easy way to sum up the difference between the two libraries re when you would you one versus the other? I note with react-native-firebase the installation is quite involved for IOS and Android, so I'm not sure whether react-redux-firebase makes this easier, but if it does do you lose anything in mix?
Main difference:
react-redux-firebase - for using Firebase with Redux
react-native-firebase - for using Firebase JS API with react-native
react-redux-firebase actually supports using react-native-firebase. react-native-firebase provides the Firebase JS API while using native-modules under the hood, meaning you can provide that as your Firebase instance to react-redux-firebase like so:
import { compose, createStore } from 'redux';
import RNFirebase from 'react-native-firebase';
import { getFirebase, reactReduxFirebase } from 'react-redux-firebase';
import thunk from 'redux-thunk';
import makeRootReducer from './reducers';
const reactNativeFirebaseConfig = {
debug: true
};
const reduxFirebaseConfig = {
userProfile: 'users', // save users profiles to 'users' collection
};
export default (initialState = { firebase: {} }) => {
// initialize firebase
const firebase = RNFirebase.initializeApp(reactNativeFirebaseConfig);
const store = createStore(
makeRootReducer(),
initialState,
compose(
reactReduxFirebase(firebase, reduxFirebaseConfig), // pass initialized react-native-firebase app instance
// applyMiddleware can be placed here
)
);
return store;
};
This setup and more is covered in the react-native recipes section of the docs.
Disclaimer: I am one of the authors of react-redux-firebase
react-redux-firebase is helper library for firebase.
I recommended using both react-native-firebase and react-redux-firebase.
react-native-firebase is easy to write, easy to read, easy to understand.
You don't need react-redux-firebase for the small application.
react-native-firebase is awesome.
If you are familiar with firebase, You can use react-native-firebase in 10 minutes.
For example
import Firebase from "react-native-firebase"
....
<Button title="button" onPress={Firebase.analytics().logEvent("pressed")} />