Failed context type: The context store is marked as required in FirebaseConnect(Connect(ComponentName)) but its value is undefined.

[maotora]

Hello, This is actually my first time to use this library and after installation and setup as directed in the getting started guide and everything looked fine. My authentication state was downloaded and added to firebase.auth redux state.

So then, I made this code on one of my components to test if I can access my database records.

import {compose} from 'redux'
import { connect } from 'react-redux'
import { firebaseConnect } from 'react-redux-firebase'
import { Upload, Input, Row, Col, Button, Icon} from 'antd'

const VSports = ({ products }) => {
    console.log(`It worked ! ${products}`)
    return (
        <div className="bordered_container">
            <Row type="flex" justify="center">
                <Col lg={8} md={12} xs={24}>
                    Vince Sports
                </Col>
            </Row>
        </div>
    )
}

export default compose(

    firebaseConnect((props) => {
        return [
            'products'
        ]
    }),
    connect(
        (state) => ({
            products: state.firebase.data.products
        })
    )

)(VSports)

What is the current behavior?

When this component gets rendered I receive that error message on the browser console and no output is being shown.

Error message:

Warning: Failed context type: The context `store` is marked as required in 
`FirebaseConnect(Connect(VSports))`, but its value is `undefined`. 
in FirebaseConnect(Connect(VSports)) (at Dashboard/index.js:40) in div (created by
 Context.Consumer) in Col (at Dashboard/index.js:142) in div (created by Context.Consumer) 
in Row (at Dashboard/index.js:141) in div (at Dashboard/index.js:112) in Dashboard (created by
 Context.Consumer) in Connect(Dashboard) (at dashboard.js:6) in div (created by Basic) in 
Basic (created by Context.Consumer) in Adapter (at admin.js:14) in div (created by BasicLayout) 
in BasicLayout (created by Context.Consumer) in Adapter (at admin.js:11) in AdminLayout
 (at dashboard.js:5) in Unknown (at _app.js:12) in Provider (at _app.js:11) in Container (at
 _app.js:10) in MyApp (at with-redux-store.js:40) in AppWithRedux

What is the expected behavior?

I expected the component to render and console.log the products.

Thanks.

[illuminist]

Please provide dependencies list from package.json.

Your problem might be:

1. Using react-redux higher than v5. If yes then downgrade to ^5.1.1, or upgrade react-redux-firebase to v3
2. Missing redux-redux's Provider component. Then refer to https://react-redux.js.org/5.x/introduction/quick-start

[prescottprue]

This is also noted in the beginning of the installation section of the README.

[maotora]

Thanks, your solution worked perfectly!

I went with downgrading react-redux@^5.1.1 option. ✨

[andrew-aladev]

Why you have to fix react-redux version to v5? react-redux authors considered v5 public api as internal and removed it from v6.0.0.

Please try to avoid react-redux dependency in future, you can just copy paste part of react-redux project and don't waste time on fighting with api.

[prescottprue]

@andrew-aladev Great suggestion - always open to a PR if you get a chance, otherwise I'll to get to it when I can