DEV Community

Cover image for Adding kepler.gl to a nextjs application
Shahab Emami
Shahab Emami

Posted on • Updated on

Adding kepler.gl to a nextjs application

#react #nextjs #redux #keplergl

Step by step guide for adding kepler.gl to nextjs app

Please notice that the final code is available here

First we create a new project with nextjs:

npx create-next-app next-kepler-gl   
cd next-kepler-gl
Enter fullscreen mode Exit fullscreen mode

Now we install packages:

 yarn add kepler.gl styled-components redux react-redux
Enter fullscreen mode Exit fullscreen mode

Then open the project in your code editor and create store/index.js file in the root of your project and put this code in it:

import keplerGlReducer from "kepler.gl/reducers";
import {createStore, combineReducers, applyMiddleware} from "redux";
import {taskMiddleware} from "react-palm/tasks";

const reducers = combineReducers({
  keplerGl: keplerGlReducer,
});

const store = createStore(reducers, {}, applyMiddleware(taskMiddleware));
export default store;
Enter fullscreen mode Exit fullscreen mode

Now let's create our Map component in pages/Map.jsx:

import React from "react";
import KeplerGl from "kepler.gl";
import {ReactReduxContext} from "react-redux";

const Map = () => {
  return (
    <ReactReduxContext.Consumer>
      {({store}) => (
        <KeplerGl
          id="map"
          width={window.innerWidth}
          mapboxApiAccessToken={
            "put your token here"
          }
          height={window.innerHeight}
          store={store}
        />
      )}
    </ReactReduxContext.Consumer>
  );
};

export default Map;
Enter fullscreen mode Exit fullscreen mode

Please notice that you need to put your own Mapbox access token in the above code and you probably want to read it from environment variables.

Now let's go to pages/index.js and create our redux wrapper and use our Map component.
So in pages/index.js:

import dynamic from "next/dynamic";
import {Provider as ReduxProvider} from "react-redux";
import store from "../store";

const DynamicMap = dynamic(() => import("./Map"), {
  ssr: false,
});

export default function Home() {
  return (
    <div>
      <ReduxProvider store={store}>
        <DynamicMap />
      </ReduxProvider>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

If you have any question about dynamic import and turning the ssr off please see nextjs docs

Now we can run our project:

yarn dev
Enter fullscreen mode Exit fullscreen mode

This should work and if it is working for you so you are good to go and you don't need to continue reading but I'm getting this error:

error - unhandledRejection: Error [ReferenceError]: ReadableStream is not defined
    at onShellReady
Enter fullscreen mode Exit fullscreen mode

According to this github issue:

Kepler.GL is not compatible with react 18, So I had to downgrade my React version and as the latest version of Next.JS requires React 18, so I had to downgrade the Next.JS version as well.

So we need to do this:

yarn remove react react-dom next
Enter fullscreen mode Exit fullscreen mode

and then

 yarn add react@17.0.2 react-dom@17.0.2 next@11.1.4
Enter fullscreen mode Exit fullscreen mode

Now if we run project again we should see this:

kepler gl view

Thanks for reading
ps: If you have any suggestion instead of downgrading react, react-dom and nextjs please share it in the comments

Top comments (0)

Read next

kigazon profile image

Unleashing Hell: Mastering States in React JS

Josef Held -

srssh profile image

Implementing SSO in React with GitHub OAuth2

Reihaneh ssh -

mattlewandowski93 profile image

The Power of Anonymous Planning Poker 🫣

Matt Lewandowski -

fpaghar profile image

Remove Duplicates Ways from an Array in Javascript

Fatemeh Paghar -