react-mapbox-gl中Cluster组件报错问题求助

Looks like you're hitting a common snag when using the Cluster component from react-map-gl—let's walk through how to fix this step by step:

1. Install the Missing Dependency #

The Cluster component relies on supercluster under the hood, and it’s not included by default with react-map-gl. First, make sure you’ve installed this required package:

npm install supercluster
# or if using yarn
yarn add supercluster

2. Double-Check Your Cluster Import #

Verify you’re importing the Cluster component correctly from react-map-gl. It should be a named import, not a default one:

import { Map, Marker, Cluster } from 'react-map-gl';

Incorrect imports (like import Cluster from 'react-map-gl') can trigger unexpected errors like the one you’re seeing.

3. Resolve Version Compatibility #

Newer versions of supercluster (v8+) switched to ES module-only exports, which can conflict with how react-map-gl’s Cluster component tries to import it. If installing the latest version doesn’t fix the issue, try downgrading to a compatible v7.x release:

npm install supercluster@7.1.5
# or
yarn add supercluster@7.1.5

4. Tweak Your ClusterMarkerFactory Code #

While not directly causing your current error, your ClusterMarkerFactory implementation has a small oversight: the parameter passed to it isn’t just coordinates—it’s an object with latitude, longitude, pointCount, and other properties. Updating it will make your cluster markers display the correct number of grouped points:

<Cluster 
  ClusterMarkerFactory={({ latitude, longitude, pointCount }) => {
    return (
      <Marker coordinates={[longitude, latitude]} style={clusterMarkerStyle}>
        <div>{pointCount}</div>
      </Marker>
    )
  }}
>
  {places.features.map((feature, key) => (
    <Marker key={key} coordinates={feature.geometry.coordinates}>
      <Mark/>
    </Marker>
  ))}
</Cluster>

Try these steps one by one—most likely, installing supercluster or fixing the version mismatch will resolve the supercluster_1.default is not a function error you’re facing.

内容的提问来源于stack exchange，提问作者Abhinav Juneja