Connected-react-router: Error `Could not find "store" in the context of "Connect(ConnectedRouterWithContext)"`

Created on 22 Jan 2019  路  2Comments  路  Source: supasate/connected-react-router

Context

  • I need to deliver a UMD library which export one global component.
  • This component will initialize all the stuff I need (store, i18n, routes, etc.)

Error

  • I've built a minimalist project to highlight the issue : https://github.com/UbikZ/connected-react-router-issue (mainly https://github.com/UbikZ/connected-react-router-issue/blob/master/src/Issue.js to the entire library code)
  • In dist folder, the UMD built library (called Issue)
  • The codepen snippet (https://codepen.io/ubikz/pen/bzGzGL) shows the error (inside the browser console) which is :
Uncaught Error: Could not find "store" in the context of "Connect(ConnectedRouterWithContext)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(ConnectedRouterWithContext) in connect options.

For the record

  • I've tried to pass custom context (with store state) inside the <ConnectedRouter> component in order to fix the issue, but got other errors.

The connected-react-router lib works like a charm when used without this atypical system (same code) thus.

Is there something I'm missing ?

Thank's for the answers.

Gabriel.

EDIT : not the same issue that #241

Most helpful comment

I'm having the same problem. I don't want to have to provide the storeContext every time I connect redux.

All 2 comments

Seems like ReactRouterRedux context (https://react-redux.js.org/using-react-redux/accessing-store) is failing to be used with the ecosystem I want to use : client JS <-> remote own framework JS <-> remote libraries (react, redux, etc.).

Find a way to handle this properly : need to use custom context in several places.

const StoreContext = React.createContext(null);

render = () => {   
    return (
      <Provider store={store} context={StoreContext}>
        <ConnectedRouter history={history} context={StoreContext}>
          ....
        </ConnectedRouter>
      </Provider>
    );
  };

And connect component (react-redux) with context :
connect(mapStateToProps, mapDispatchToProps, null, {context: StoreContext});

Fix my issue.
I don't know if there is some better solution for that.

I'm having the same problem. I don't want to have to provide the storeContext every time I connect redux.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tonoslav picture tonoslav  路  4Comments

bmueller-sykes picture bmueller-sykes  路  4Comments

jhwheeler picture jhwheeler  路  3Comments

AdrienLemaire picture AdrienLemaire  路  5Comments

zry754331875 picture zry754331875  路  3Comments