[Bug] Kepler.gl 3.2.0 + Next.js 15.5.6 - KeplerMap fails to load

[Sh3rlck]

I am trying to integrate the latest version of kepler.gl with the latest version of Next.js, and I’m running into issues loading the KeplerMap component.

---

Issue

The map area appears blank, and I see the following error in the console:

Error: ENOENT: no such file or directory, open 'C:\ROOT\node_modules\parquet-wasm\node\parquet_wasm_bg.wasm'
    at __TURBOPACK__module__evaluation__ (src\components\providers\ReduxProvider.jsx:7:1)
   5 | import { configureStore } from "@reduxjs/toolkit";
   6 | import { combineReducers } from "redux";
>  7 | import keplerGlReducer from "@kepler.gl/reducers";
     | ^
   8 |
   9 | export default function ReduxProvider({ children }) {
  10 |     const storeRef = useRef(null); {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\ROOT\\node_modules\\parquet-wasm\\node\\parquet_wasm_bg.wasm',
  digest: '1878165469'

---

Related issues

It seems this person is running into a similar issue but no answer was provided:
vercel/next.js#79090

I am looking to see if this integration is possible or if there are any limitations I am not aware of.

---

⚙️ Dependencies

"scripts": {
  "dev": "next dev --turbopack",
  "build": "next build --turbopack",
  "start": "next start"
},
"dependencies": {
  "@kepler.gl/actions": "^3.2.0",
  "@kepler.gl/components": "^3.2.0",
  "@kepler.gl/reducers": "^3.2.0",
  "@kepler.gl/styles": "^3.2.0",
  "@reduxjs/toolkit": "^2.9.1",
  "kepler.gl": "^3.2.0",
  "next": "15.5.6",
  "react": "19.1.0",
  "react-dom": "19.1.0",
  "react-redux": "^9.2.0",
  "redux": "^5.0.1",
  "styled-components": "^6.1.19"
}

---

ReduxProvider.jsx

"use client";

import { Provider } from "react-redux";
import { useRef } from "react";
import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
import keplerGlReducer from "@kepler.gl/reducers";

export default function ReduxProvider({ children }) {
  const storeRef = useRef(null);

  if (!storeRef.current) {
    const rootReducer = combineReducers({
      keplerGl: keplerGlReducer,
    });

    storeRef.current = configureStore({
      reducer: rootReducer,
      middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
          serializableCheck: false,
          immutableCheck: false,
        }),
    });
  }

  return <Provider store={storeRef.current}>{children}</Provider>;
}

---

KeplerMap.jsx

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

const KeplerMap = () => {
  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],
        ],
      },
    },
  ];

  return (
    <ReactReduxContext.Consumer>
      {({ store }) => (
        <KeplerGl
          id="map"
          width={window.innerWidth}
          height={window.innerHeight}
          mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
          store={store}
          initialData={initialData}
        />
      )}
    </ReactReduxContext.Consumer>
  );
};

export default KeplerMap;

---

Page where map is loaded (Home.jsx)

"use client";
import dynamic from "next/dynamic";

const KeplerMap = dynamic(() => import("../components/Kepler/KeplerMap.jsx"), {
  ssr: false,
});

export default function Home() {
  return <KeplerMap />;
}

---

Environment:

• Kepler.gl: 3.2.0
• Next.js: 15.5.6
• React: 19.1.0
• Redux Toolkit: 2.9.1
• Styled Components: 6.1.19
• Using Turbopack for dev/build.

[bykinBit]

KeplerGl dependences react version 18.2.0, you can try change your react version to 18.2.0, Maybe it can work.