keplergl / keplergl/kepler.gl

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

Open
#3,225 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
12k
Forks
2k
Avg merge
1d 5h
Merged PRs (30d)
66

Description

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.

Image
---

#### **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:
[https://github.com/vercel/next.js/discussions/79090](https://github.com/vercel/next.js/discussions/79090)

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

---

#### ⚙️ **Dependencies**

```json
"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**

```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 {children};
}
```

---

#### **KeplerMap.jsx**

```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 (

{({ store }) => (

)}

);
};

export default KeplerMap;
```

---

#### **Page where map is loaded (Home.jsx)**

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

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

export default function Home() {
return ;
}
```

---
**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.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with src/components/providers/ReduxProvider.jsx, KeplerMap.jsx, and Home.jsx, then reproduce the issue using the listed Kepler.gl, Next.js, React, and Turbopack versions. Trace why importing @kepler.gl/reducers cannot find parquet_wasm_bg.wasm; done means the map loads without the ENOENT error under the documented setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, react
Domain
build-system, data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.