CODEWITHSUNDEEP
node.jsreactjsfirebasereact-reduxreact-redux-firebase
And4Web
And4Web

Reputation: 84

react redux firebase error while importing firebase, not able to import firebase. how to solve it?

I'm making a project in which I'm using firebase for my database and authentication. but while making my redux store error pops up and says I'm not importing firebase correctly. I exactly copied the code to import from the official documentation of firebase and react-redux-firebase github page but still problem doesn't seem to resolve. please check someone and try to help. here is my store.js file:

import { createStore, combineReducers, compose } from "redux";
import { reduxFirestore, firestoreReducer } from "redux-firestore";
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: "myfirebaseAPI",
  authDomain: "clientpannelapp-398a6.firebaseapp.com",
  projectId: "clientpannelapp-398a6",
  storageBucket: "clientpannelapp-398a6.appspot.com",
  messagingSenderId: "921527365457",
  appId: "1:921527365457:web:7bc3d3b585f64cc2e752d4",
  measurementId: "G-NECV93QJ1V",
};

//react-redux-firestore Config Options
const rrfConfig = {
  userProfile: "users",
  useFirestoreForProfile: true, //Firestore for profile instead of real time db
};

// Initialize firebase instance
firebase.initializeApp(firebaseConfig);

// Initialize Cloud Firestore through Firebase
const firestore = firebase.firestore();

// add reduxFirestore store enhancer to store creator
const createStoreWithFirebase = compose(
  reduxFirestore(firebase, rrfConfig) // firebase instance as first argument, rrfConfig as optional second
)(createStore);

// Add Firebase to reducers
const rootReducer = combineReducers({
  firestore: firestoreReducer,
});

// Create store with reducers and initial state
const initialState = {};

const store = createStoreWithFirebase(
  rootReducer,
  initialState,
  compose(
    reduxFirestore(firebase),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

following is the error shown:

ERROR in ./src/store.js 37:88-96
export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, 
_apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel)        
 @ ./src/App.js 9:0-28 14:11-16
 @ ./src/index.js 6:0-24 10:33-36

Upvotes: 0

Views: 592

Answers (1)

Anonyum
Anonyum

Reputation: 114

The issue lies on the const firestore = firebase.firestore()firebase does not have firestore() function as said from the above error, so first assign ur initilization of ur firebase app to a variable, then use the getFirestore() from 'firebase/firestore' with app as params

import {getFirestore} from 'firebase/firestore'

const app = firebase.initializeApp(firebaseConfig);

const firestore = getFirestore(app);

Upvotes: 1

Related Questions