Integrating Kepler.gl with Next.js 15 #3100

yasataro-biz · 2025-05-12T14:39:34Z

yasataro-biz
May 12, 2025

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/kepler.gl@3.0.0/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": "yarn@1.22.22

delfrrr · 2025-05-12T17:38:56Z

delfrrr
May 12, 2025

Hey, not exactly a direct answer but wanted to share my experience:

– Kepler examples are built using Webpack
– Next.js 15 uses Turbopack, which currently doesn't support direct .wasm file imports like Webpack does
→ Reference: vercel/next.js#75430

I was updating Dekart (open-source backend for Kepler.gl) to Kepler 3.x. It’s based on CRA, and I was able to get it working, though some layers did not work.

Eventually, I migrated to Vite, and that worked smoothly. Will merge open-source after doing all tests.

2 replies

yasataro-biz May 21, 2025
Author

Hi, thank you for answering my question.

I tried to use Turbopack , but it did not work.

And, I saw the issue, facebook/create-react-app#17003, they say that CRA is unrecommended.

So, will your application migrate Vite ?

I try to create the react with Vite.

igorDykhta May 21, 2025
Collaborator

@yasataro-biz
kepler.gl/demo example is built with esbuilt
duck-db example on https://kepler-preview.foursquare.com/ is built with Vite.

igorDykhta · 2025-05-21T12:02:14Z

igorDykhta
May 21, 2025
Collaborator

@yasataro-biz

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

Maybe it makes sense to research how to use @loaders.gl/parquet with Next.js, since we haven’t tried that in Kepler.gl.

0 replies

lixun910 · 2025-05-21T18:31:49Z

lixun910
May 21, 2025
Collaborator

Maybe you can try to config next.js to compile and use kepler.gl as a client side component:

webpack: (config, { isServer }) => {

    // Make @kepler.gl/* client-side only by aliasing them to a dummy module or false on the server side
    if (isServer) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@kepler.gl/components': false,
        '@kepler.gl/processors': false,
        '@kepler.gl/constants': false,
        '@kepler.gl/utils': false,
        '@kepler.gl/layers': false,
        '@kepler.gl/effects': false,
        '@kepler.gl/table': false,
        '@kepler.gl/deckgl-layers': false,
        '@kepler.gl/reducers': false,
        '@kepler.gl/styles': false,
        '@kepler.gl/types': false,
        '@kepler.gl/actions': false,
      };
    }

    // Add worker-loader configuration
    config.module.rules.push({
      test: /\.worker\.(js|ts)$/,
      use: {
        loader: 'worker-loader',
        options: {
          filename: 'static/[hash].worker.js',
          publicPath: '/_next/',
        },
      },
    });

    // Add wasm support
    config.experiments = {
      ...config.experiments,
      asyncWebAssembly: true,
    };
    config.module.rules.push({
      test: /\.wasm/,
      type: 'asset/resource',
      generator: {
        filename: 'static/chunks/[name][ext]',
      },
    });
   ...
}

Use kepler.gl as client-only component:

'use client';
...
const KeplerGlComponent= dynamic(() => import('./components/your_keplergl_component'), {
  ssr: false,
});

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Integrating Kepler.gl with Next.js 15 #3100

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Integrating Kepler.gl with Next.js 15 #3100

Uh oh!

yasataro-biz May 12, 2025

Replies: 3 comments · 2 replies

Uh oh!

delfrrr May 12, 2025

Uh oh!

yasataro-biz May 21, 2025 Author

Uh oh!

igorDykhta May 21, 2025 Collaborator

Uh oh!

igorDykhta May 21, 2025 Collaborator

Uh oh!

lixun910 May 21, 2025 Collaborator

yasataro-biz
May 12, 2025

Replies: 3 comments 2 replies

delfrrr
May 12, 2025

yasataro-biz May 21, 2025
Author

igorDykhta May 21, 2025
Collaborator

igorDykhta
May 21, 2025
Collaborator

lixun910
May 21, 2025
Collaborator