React-redux-firebase: Error : Firebase database is required to create watchers

[wildfrontend]

react-redux-firebase version: v3

I create react app by next.js

when i connect firebase data i will get this error throw

my connection firebase code

export default compose(
   firebaseConnect('products'),
   connect(mapStateToProps)
)(Page)

maybe this problem from nextjs ssr?

[prescottprue]

@Louis-Chen Are you sure you imported database? Like so:

import firebase from 'firebase/app'
import  'firebase/database'
// import 'firebase/firestore'

[prescottprue]

@Louis-Chen Going to close assuming that things were not correctly imported. Feel free to reach out if you are still experiencing the issue.

[khmaies5]

i imported database like what you said but i still have the same Error

const fire = firebaseConnect(props => [
  { type: 'once', path: '/courses', queryParams: ['orderByChild=slug', `equalTo=${props.match.params.slug}`] }
]);

const con = connect(state => ({
  courseData: state.firebase.ordered.courses
}), mapDispatchToProps);

export default compose(con, fire)(Course);

edit: i removed the import 'firebase/database' and then i added it again, now i got this error:
TypeError: Cannot read property 'watchers' of undefined

[prescottprue]

@khmaies5 How is your store setup? Are you passing any config into the react-redux-firebase enhancer?

[khmaies5]

@prescottprue i was importing react-redux-firebase/lib and that what caused the error.
now i have other error :
Uncaught Error: Supplied prop/s "firebase", "dispatch" are reserved for internal firebaseConnect() usage.

this happens when i use react-redux-firebase inside a component and then call that component inside other component where i also use react-redux-firebase

store.js

import { createBrowserHistory } from 'history'
import { createStore, compose, applyMiddleware } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import { reactReduxFirebase, firebaseReducer } from 'react-redux-firebase'
import createRootReducer  from './core/reducers/index';

export const history = createBrowserHistory();

export default function configureStore (initialState) {
  const createStoreWithMiddleware = compose(
    typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? () => window.__REDUX_DEVTOOLS_EXTENSION__ : f => f,
    applyMiddleware(
      routerMiddleware(history) // for dispatching history actions
    )
  )(createStore)
  const store = createStoreWithMiddleware(createRootReducer(history))

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./core/reducers/index', () => {
      const nextRootReducer = require('./core/reducers/index')
      store.replaceReducer(nextRootReducer)
    })
  }

  return store
}

reducers

import { combineReducers } from 'redux';
import { firebaseStateReducer as firebase } from 'react-redux-firebase'
import { connectRouter } from 'connected-react-router';
import mainReducer from './mainReducer';

export default (history) => combineReducers({

  firebase,
  router: connectRouter(history),
  mainReducer

});

[khmaies5]

@prescottprue ithe only difference from v3 migration was that i am importing firebaseStateReducer not firebaseReducer i changed that to the correct one but i still get: Uncaught Error: Supplied prop/s "firebase", "dispatch" are reserved for internal firebaseConnect() usage.

even after i tried this

[olefritsch]

I'm getting this error as well, auth works as expected but when trying to access a subcollection for a given user's document, (or any other path) using useFirebaseConnect I get the error: "Firebase database is required to create watchers".

Provider:

import 'firebase/auth'
import 'firebase/firestore'
import firebase from 'firebase/app'
import React from 'react'
import PropTypes from 'prop-types'
import { createFirestoreInstance } from 'redux-firestore'
import { ReactReduxFirebaseProvider } from 'react-redux-firebase'
import { firebaseConfig } from 'config'
import store from 'redux/store'

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
  firebase.firestore()
}

const rrfProps = {
  firebase,
  config: {
    userProfile: 'users',
    useFirestoreForProfile: true,
  },
  dispatch: store.dispatch,
  createFirestoreInstance,
}

function FirebaseProvider({ children }) {
  return <ReactReduxFirebaseProvider {...rrfProps}>{children}</ReactReduxFirebaseProvider>
}

FirebaseProvider.propTypes = {
  children: PropTypes.node.isRequired,
}

export default FirebaseProvider

Store:

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import rootReducer from './rootReducer'

const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: false,
    immutableCheck: false,
  }),
})

export default store