[Bug] Map is not loading in a custom React application

[zmeecer]

Describe the bug

Create an application via create-react-app, integrate kepler.gl following an example from Readme. The side panel is visible, but there is no map at all. In DevTools: no errors, no requests to Mapbox.

Expected behavior

The same as on the demo site: side panel and the map

Screenshots

Desktop (please complete the following information):

• OS: MacOS Big Sur
• Browser: Chrome v95

[Pipazoul]

How have you passed your mapbox token ?

[zmeecer]

How have you passed your mapbox token ?

yep, tried the same token in a minimal react-map-gl example - works fine.

in some cases I get these warnings, what can be relevant to the issue:

and here is my code:

const Map = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(addDataToMap(defaultData));
  }, [dispatch]);

  return (
    <KeplerGl
      id="foo"
      mapboxApiAccessToken="$token$"
      width={800}
      height={600}
    />
  );
};

[zmeecer]

An interesting fact: the demo application is working correctly - with the same set of dependencies. Now trying to make my application and the demo one as similar as possible. I will provide any further findings

[hmzls]

I ran into the same problem.

In my particular case, it turned out that I had not applied the taskMiddleware of react-palm correctly. After adding this, the map showed up correctly. For more information, see: https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/get-started.md

[BugsBunny338]

I just ran into the same problem, except I cannot follow @hmzls's advice as react-palm does not support React v17 that I'm currently running 😬 Any ideas how to fix this?