Kepler.gl: Kepler.gl doesn't work with Redux4 used in the wrapper application

Created on 3 Feb 2019 · 18Comments · Source: keplergl/kepler.gl

Describe the bug
Kepler.gl is not working when wrapper application uses react-redux6.
To Reproduce
I created a branch with a new example here

Expected behavior
Kepler.gl should load correctly

Debug trace

Uncaught Error: Could not find "store" in either the context or props of "Connect(Container)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Container)".
    at invariant (browser.js:38)
    at new Connect (connect.js:132)
    at constructClassInstance (react-dom.development.js:12628)
    at updateClassComponent (react-dom.development.js:14480)
    at beginWork (react-dom.development.js:15335)
    at performUnitOfWork (react-dom.development.js:18150)
    at workLoop (react-dom.development.js:18190)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)

Additional context
React 15

bug

Source

macrigiuseppe

Most helpful comment

Thanks for working on this @macrigiuseppe, I found this problem and downgraded react-redux to version 5.1.1, but unfortunately with this version it is not possible to use connected-react-router. So after upgrading back to react-redux 6.0.0, I've found this solution that also works for me:
      <ReactReduxContext.Consumer>
        {({ store }) => (
          <div className="App">
              <KeplerGl
                id="foo"
                mapboxApiAccessToken={MAPBOX_TOKEN}
                store={store}
              />
          </div>
        )}
      </ReactReduxContext.Consumer>

Have you tried react-redux 5.0.7, it works for me

macrigiuseppe on 12 Feb 2019

👍2

All 18 comments

The problem may be related to react-redux version (try 5.0.7)

macrigiuseppe on 5 Feb 2019

I use this workaround:

    <Provider store={store}>
        <CustomContext.Provider value={store}>
            <App />
                <KeplerGl
                   id="foo"
                   store={store}
                   width={WIDTH}
                   mapboxApiAccessToken={MAPBOX_TOKEN}
                   height={HEIGHT} />
       </CustomContext.Provider>
 </Provider>

sushmitsarmah on 8 Feb 2019

I use this workaround:

    <Provider store={store}>
        <CustomContext.Provider value={store}>
            <App />
                <KeplerGl
                   id="foo"
                   store={store}
                   width={WIDTH}
                   mapboxApiAccessToken={MAPBOX_TOKEN}
                   height={HEIGHT} />
       </CustomContext.Provider>
 </Provider>

@sushmitsarmah Thank you for the comment. I am working on upgrading react and redux to the latest versions

macrigiuseppe on 8 Feb 2019

Thanks for working on this @macrigiuseppe, I found this problem and downgraded react-redux to version 5.1.1, but unfortunately with this version it is not possible to use connected-react-router. So after upgrading back to react-redux 6.0.0, I've found this solution that also works for me:

      <ReactReduxContext.Consumer>
        {({ store }) => (
          <div className="App">
              <KeplerGl
                id="foo"
                mapboxApiAccessToken={MAPBOX_TOKEN}
                store={store}
              />
          </div>
        )}
      </ReactReduxContext.Consumer>

carloscdias on 11 Feb 2019

Thanks for working on this @macrigiuseppe, I found this problem and downgraded react-redux to version 5.1.1, but unfortunately with this version it is not possible to use connected-react-router. So after upgrading back to react-redux 6.0.0, I've found this solution that also works for me:
      <ReactReduxContext.Consumer>
        {({ store }) => (
          <div className="App">
              <KeplerGl
                id="foo"
                mapboxApiAccessToken={MAPBOX_TOKEN}
                store={store}
              />
          </div>
        )}
      </ReactReduxContext.Consumer>

Have you tried react-redux 5.0.7, it works for me

macrigiuseppe on 12 Feb 2019

👍2

Thanks for working on this @macrigiuseppe, I found this problem and downgraded react-redux to version 5.1.1, but unfortunately with this version it is not possible to use connected-react-router. So after upgrading back to react-redux 6.0.0, I've found this solution that also works for me:
      <ReactReduxContext.Consumer>
        {({ store }) => (
          <div className="App">
              <KeplerGl
                id="foo"
                mapboxApiAccessToken={MAPBOX_TOKEN}
                store={store}
              />
          </div>
        )}
      </ReactReduxContext.Consumer>
Have you tried react-redux 5.0.7, it works for me

Kepler works for me with react-redux 5.0.7 and 5.1.1 as well, but the limitation to use react-redux 6.0 or later was imposed by connected-react-router and that was the work around I've used to integrate Kepler with react-redux 6.0.

carloscdias on 13 Feb 2019

Any progress on getting kepler working with the latest react-redux? Need any help?

derek-nascent on 12 Jun 2019

Any progress on getting kepler working with the latest react-redux? Need any help?

@derek-nascent we are currently not focusing on react-redux upgrade. Please feel free to contribute with a pull request and we will be more than happy to review it

macrigiuseppe on 12 Jun 2019

@macrigiuseppe How would one go about upgrading react-redux for kepler?

We're using kepler as a child component of one of our redux connected pages, and the solution from @carloscdias is causing a lot of rerenders of the map. We have a fork of the repo that we can upgrade, and we could make a PR for this repo once we get it figured out, I'm just not sure where to start

Harrisandwich on 27 Sep 2019

@macrigiuseppe @derek-nascent @carloscdias

So it turns out kepler is already kind of compatible with Redux 6+ apps.

In your webpack.config.js under resolve, include this line:
modules: [resolve('node_modules'), 'node_modules'],

It turns out the real issue here is that Kepler is using it's own instance of redux, so it doesn't have access to the redux context, even if you update it to redux 7 (I tried this). In order to make sure both kepler and your project are on the same page, you need to force kepler to use your project's version of redux. Kepler's implementation of redux is perfectly compatible with redux 6+, as the only important change in this case is react's context api.

A quick note though. If you're building more complicated apps (more complicated than just wrapping kepler in a provider for example) you may experience some performance problems. I'm not sure why, but kepler is forcing rerenders in our app, even in components that don't access it's state. You may need to use shouldComponentUpdate to make sure a component only updates if it's actual props update, and ignore keplers ghost updates

Harrisandwich on 2 Oct 2019

@macrigiuseppe @derek-nascent @carloscdias

So it turns out kepler is already kind of compatible with Redux 6+ apps.

In your webpack.config.js under resolve, include this line:
modules: [resolve('node_modules'), 'node_modules'],

It turns out the real issue here is that Kepler is using it's own instance of redux, so it doesn't have access to the redux context, even if you update it to redux 7 (I tried this). In order to make sure both kepler and your project are on the same page, you need to force kepler to use your project's version of redux. Kepler's implementation of redux is perfectly compatible with redux 6+, as the only important change in this case is react's context api.

A quick note though. If you're building more complicated apps (more complicated than just wrapping kepler in a provider for example) you may experience some performance problems. I'm not sure why, but kepler is forcing rerenders in our app, even in components that don't access it's state. You may need to use shouldComponentUpdate to make sure a component only updates if it's actual props update, and ignore keplers ghost updates

@Harrisandwich, as a total beginner, how would I configure webpack.config.js??

HugoBarreto on 28 Oct 2019

@macrigiuseppe @derek-nascent @carloscdias
So it turns out kepler is already kind of compatible with Redux 6+ apps.
In your webpack.config.js under resolve, include this line:
modules: [resolve('node_modules'), 'node_modules'],
It turns out the real issue here is that Kepler is using it's own instance of redux, so it doesn't have access to the redux context, even if you update it to redux 7 (I tried this). In order to make sure both kepler and your project are on the same page, you need to force kepler to use your project's version of redux. Kepler's implementation of redux is perfectly compatible with redux 6+, as the only important change in this case is react's context api.
A quick note though. If you're building more complicated apps (more complicated than just wrapping kepler in a provider for example) you may experience some performance problems. I'm not sure why, but kepler is forcing rerenders in our app, even in components that don't access it's state. You may need to use shouldComponentUpdate to make sure a component only updates if it's actual props update, and ignore keplers ghost updates

@Harrisandwich, as a total beginner, how would I configure webpack.config.js??

Hey @HugoBarreto we have some samples you can use that are a good starting point.

macrigiuseppe on 28 Oct 2019

@macrigiuseppe I'm sorry for the dumb questions, but I'm totally new at this.

I see the webpack folder, are you referring to those files? Which one should I have a local copy and modify in my app? Beside that, should I modify anything else?

HugoBarreto on 28 Oct 2019

@macrigiuseppe I'm sorry for the dumb questions, but I'm totally new at this.

I see the webpack folder, are you referring to those files? Which one should I have a local copy and modify in my app? Beside that, should I modify anything else?

Now I understand what you meant. Thanks for pointing that out

HugoBarreto on 29 Oct 2019

I had a similar issue and have a fix here
In v6 react-redux migrated from legacy react context to createContext. As a result, it seems that in order for connect to access the store object passed from Provider, connect and Provider must come from a single react-redux dependency.
Remove the dependency on react-redux and use peerDependency (to make sure it always uses app level react-redux might be able to solve the issue.

Firenze11 on 31 Oct 2019

@Firenze11 I did attempt this at one point, but decided against it when I had troubles compiling the demo app in the main repo. It may work just fine imported into a project though, I just never tried. It's also possible that I did something wrong switching it over to a peer dependancy, or missed in important step. I'll definitly take a peek at your PR!

Harrisandwich on 31 Oct 2019

I use this workaround:

    <Provider store={store}>
        <CustomContext.Provider value={store}>
            <App />
                <KeplerGl
                   id="foo"
                   store={store}
                   width={WIDTH}
                   mapboxApiAccessToken={MAPBOX_TOKEN}
                   height={HEIGHT} />
       </CustomContext.Provider>
 </Provider>

Hi,
I am newbie in Superset and Kepler, can you help me?
I tried to integrate Kepler (v1.1.3) in Superset (v036) and I have this error:

An error occurred while rendering the visualization: Error: Could not find "store" in the context of "Connect(Container)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(Container) in connect options.

in ConnectFunction (created by Kepler)
in div (created by Kepler)
in Kepler (created by Connect(Kepler))
in Connect(Kepler) (created by SubApp)
in Provider (created by SubApp)
in SubApp (created by CustomLoadableRenderer)
in CustomLoadableRenderer (created by SuperChartCore)
in div (created by SuperChartCore)
in SuperChartCore (created by SuperChart)
in SuperChart (created by ChartRenderer)
in ChartRenderer (created by Chart)
in div (created by Chart)
in div (created by Chart)
in ErrorBoundary (created by Chart)
in Chart (created by Connect(Chart))
in Connect(Chart) (created by ParentSize)

Can you tell me where I can put your workaround?
Currently in my superset-frontend/src/visualizations/Kepler/Kepler.jsx file I have:

render() { return ( <Provider store={this.store}> <KeplerConnected {...this.props} /> </Provider> ); }

Thanks a lot

P.S. Kepler version 1.1.8 works in my Superset version 036 but I would like to update Kepler in order to fix some bug in cluster type layer

alessiocamillo on 7 May 2020

I use this workaround:
    <Provider store={store}>
        <CustomContext.Provider value={store}>
            <App />
                <KeplerGl
                   id="foo"
                   store={store}
                   width={WIDTH}
                   mapboxApiAccessToken={MAPBOX_TOKEN}
                   height={HEIGHT} />
       </CustomContext.Provider>
 </Provider>
Hi,
I am newbie in Superset and Kepler, can you help me?
I tried to integrate Kepler (v1.1.3) in Superset (v036) and I have this error:

An error occurred while rendering the visualization: Error: Could not find "store" in the context of "Connect(Container)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(Container) in connect options.
in ConnectFunction (created by Kepler)
in div (created by Kepler)
in Kepler (created by Connect(Kepler))
in Connect(Kepler) (created by SubApp)
in Provider (created by SubApp)
in SubApp (created by CustomLoadableRenderer)
in CustomLoadableRenderer (created by SuperChartCore)
in div (created by SuperChartCore)
in SuperChartCore (created by SuperChart)
in SuperChart (created by ChartRenderer)
in ChartRenderer (created by Chart)
in div (created by Chart)
in div (created by Chart)
in ErrorBoundary (created by Chart)
in Chart (created by Connect(Chart))
in Connect(Chart) (created by ParentSize)
Can you tell me where I can put your workaround?
Currently in my superset-frontend/src/visualizations/Kepler/Kepler.jsx file I have:

render() { return ( <Provider store={this.store}> <KeplerConnected {...this.props} /> </Provider> ); }

Thanks a lot

P.S. Kepler version 1.1.8 works in my Superset version 036 but I would like to update Kepler in order to fix some bug in cluster type layer