Integrating Kepler.gl with Next.js 15 #79090

yasataro-biz · 2025-05-12T14:26:59Z

yasataro-biz
May 12, 2025

Summary

I am encountering an problem where the Kepler.gl map is not displaying correctly when I try to run it in my application. The map area appears blank, and I see an error in the console. I'm hoping someone can help me understand the cause and how to fix it.

Problem Description:

When I navigate to the page where the Kepler.gl component is rendered, the area designated for the map remains empty. It seems like the map rendering process is failing.

Error Message:

I am seeing the following error message in my browser's:

Runtime Error
Error: ENOENT: no such file or directory, open '/Users/*/*/keplergl-app/.next/server/vendor-chunks/parquet_wasm_bg.wasm'

My project structure is roughly:

/keplergl-app
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── KeplerGlClient.tsx
│   └── ReduxProvider.tsx
├── src/redux/
│   └── store.ts
├── package.json
├── next.config.ts
└── ... other files

layout.tsx

import './globals.css';
import React from 'react';
import ReduxProvider from '../components/ReduxProvider';

interface RootLayoutProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
      <head>
        <script src="https://unpkg.com/[email protected]/umd/keplergl.min.js" />
      </head>
      <body>
        <ReduxProvider>
          {children}
        </ReduxProvider>
      </body>
    </html>
  );
}

page.tsx

'use client';

import dynamic from 'next/dynamic';
import React from 'react';

const DynamicConnectedKeplerGlClient = dynamic<any>(
    () => import('../components/KeplerGlClient'),
    {
        ssr: false,
        loading: () => <p>Loading map...</p>,
    }
);

export default function HomePage() {
    const MAPBOX_TOKEN = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
    const initialData = [
      {
        info: {
          label: 'My Geo Data',
          id: 'my_data',
        },
        data: {
          fields: [ { id: 'latitude', type: 'real' }, { id: 'longitude', type: 'real' }, { id: 'value', type: 'real' } ],
          rows: [ [ 35.68, 139.76, 100 ], [ 34.05, -118.24, 200 ] ],
        },
      }
    ];

    const initialConfig = {
      version: 'v1',
      config: {
         mapState: { latitude: 35.68, longitude: 139.76, zoom: 8 },
        }
    };

    return (
        <div style={{ width: '100vw', height: '100vh', overflow: 'hidden' }}>
            <DynamicConnectedKeplerGlClient
                mapboxApiAccessToken={MAPBOX_TOKEN}
                id="mymap"
                initialData={initialData}
                initialConfig={initialConfig}
            />
        </div>
    );
}

KeplerGlClient.tsx

'use client';

import React from 'react';
import { connect } from 'react-redux';
import { AutoSizer } from 'react-virtualized';
import { KeplerGl } from '@kepler.gl/components';
import { addDataToMap } from '@kepler.gl/actions';
import type { RootState, AppDispatch } from '../src/redux/store';

interface OwnProps {
  mapboxApiAccessToken?: string;
  id?: string;
  initialData?: any;
  initialConfig?: any;
}

interface StateProps {
  keplerGl: any;
}

interface DispatchProps {
  addDataToMap: typeof addDataToMap;
}

type KeplerGlClientProps = OwnProps & StateProps & DispatchProps;

const mapStateToProps = (state: RootState): StateProps => ({
    keplerGl: state.keplerGl,
});

const mapDispatchToProps = (dispatch: AppDispatch): DispatchProps => ({
    addDataToMap: (data: any) => dispatch(addDataToMap(data)),
});

function KeplerGlClient(props: KeplerGlClientProps) {
    React.useEffect(() => {
      if (props.initialData && props.keplerGl && !props.keplerGl[props.id || 'map']?.mapState) {
        props.addDataToMap({ datasets: props.initialData, config: props.initialConfig, options: { mapsetId: props.id } });
      }
    }, [props.initialData, props.initialConfig, props.addDataToMap, props.keplerGl, props.id]);

    return (
        <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
             <AutoSizer>
                {({ height, width }: { height: number; width: number }) => (
                    <KeplerGl
                        mapboxApiAccessToken={props.mapboxApiAccessToken}
                        id={props.id || 'map'}
                        width={width}
                        height={height}
                    />
                )}
            </AutoSizer>
        </div>
    );
}

const ConnectedKeplerGlClient = connect(
    mapStateToProps,
    mapDispatchToProps,
)(KeplerGlClient);

export default ConnectedKeplerGlClient;

ReduxProvider.tsx

'use client';

import React from 'react';
import { Provider } from 'react-redux';
import store from '../src/redux/store';

interface ReduxProviderProps {
  children: React.ReactNode;
}

function ReduxProvider({ children }: ReduxProviderProps) {
  return (
    <Provider store={store}>
      {children}
    </Provider>
  );
}

export default ReduxProvider;

store.ts

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import keplerGlReducer from '@kepler.gl/reducers';

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

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
     serializableCheck: false,
     immutableCheck: false,
  }),
});

export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = typeof store.dispatch;
export default store;

package.json

  "dependencies": {
    "@kepler.gl/actions": "^3.1.1",
    "@kepler.gl/components": "^3.1.1",
    "@kepler.gl/reducers": "^3.1.1",
    "@reduxjs/toolkit": "^2.8.1",
    "@types/mapbox-gl": "^3.4.1",
    "@types/react-redux": "^7.1.34",
    "@types/react-virtualized": "^9.22.2",
    "kepler.gl": "^3.1.1",
    "mapbox-gl": "^3.12.0",
    "next": "15.3.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^9.1.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^9",
    "eslint-config-next": "15.3.2",
    "tailwindcss": "^4",
    "typescript": "^5"
  },
  "packageManager": "[email protected]

icyJoseph · 2025-05-15T14:41:36Z

icyJoseph
May 15, 2025
Collaborator

Is your project using --turbopack?

4 replies

yasataro-biz May 20, 2025
Author

My project do not use turbopack.

I'm not sure if I should use Turbopack for my project.

icyJoseph May 20, 2025
Collaborator

Just asking because, you didn't share the scripts section of your package.json, which could have the --turbopack flag.

Are you able to next build the project, and next start it? Is the map also not working there?

yasataro-biz May 21, 2025
Author

Okey, thank you for asking to me.

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

I can use these commands, but the map does not display.

I guess that @kepler.gl/middleware is cause the problem probably.

chadshankweiler Jun 27, 2025

Were you able to find a solution?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Integrating Kepler.gl with Next.js 15 #79090

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Integrating Kepler.gl with Next.js 15 #79090

Uh oh!

Uh oh!

yasataro-biz May 12, 2025

Summary

Replies: 1 comment · 4 replies

Uh oh!

icyJoseph May 15, 2025 Collaborator

Uh oh!

yasataro-biz May 20, 2025 Author

Uh oh!

icyJoseph May 20, 2025 Collaborator

Uh oh!

Uh oh!

yasataro-biz May 21, 2025 Author

Uh oh!

chadshankweiler Jun 27, 2025

yasataro-biz
May 12, 2025

Replies: 1 comment 4 replies

icyJoseph
May 15, 2025
Collaborator

yasataro-biz May 20, 2025
Author

icyJoseph May 20, 2025
Collaborator

yasataro-biz May 21, 2025
Author