react-leaflet使用MarkerCluster报useLeafletContext上下文缺失错误如何解决？

• 依赖实例重复：你使用的react-leaflet-markercluster@3.0.0-rc1属于未正式发布的预览版本，且该包早已停止维护，内部固定依赖了独立的react-leaflet版本。当项目中安装的react-leaflet和它内部依赖的版本不一致时，会同时加载两份react-leaflet实例：MapContainer使用外层项目的react-leaflet创建上下文，而MarkerCluster内部调用useLeafletContext时读取的是自身依赖包里的react-leaflet上下文，两者不互通就会抛出该错误。
• browserslist编译规则异常：你测试新项目时删除开发环境的browserslist配置就恢复正常，本质是react-scripts@4.0.0存在已知bug，不同的browserslist编译目标会导致React上下文传递断裂。你现有项目的browserslist为全局配置，未区分开发/生产环境，会触发这个编译层面的bug。
• 组件结构错误（小概率）：若MarkerCluster组件未放在MapContainer的直接/间接子节点位置，或是被高阶组件、动态导入的组件包裹在MapContainer上下文树外，也会导致无法读取上下文。

按优先级从高到低排列：

• 方案1：弃用第三方react-leaflet-markercluster包，基于原生leaflet.markercluster自行封装组件，彻底解决版本冲突问题，示例代码如下：

import React from 'react';
import { useEffect, useRef } from 'react';
import { useLeafletContext, Marker } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet.markercluster';
// 记得导入markercluster的样式
import 'leaflet.markercluster/dist/MarkerCluster.css';
import 'leaflet.markercluster/dist/MarkerCluster.Default.css';

const MarkerClusterGroup = ({ children, ...clusterOptions }) => {
  const { map } = useLeafletContext();
  const clusterInstanceRef = useRef(L.markerClusterGroup(clusterOptions));

  // 挂载/卸载聚合图层
  useEffect(() => {
    map.addLayer(clusterInstanceRef.current);
    return () => map.removeLayer(clusterInstanceRef.current);
  }, [map]);

  // 同步子Marker到聚合图层
  useEffect(() => {
    const cluster = clusterInstanceRef.current;
    cluster.clearLayers();
    React.Children.forEach(children, (child) => {
      if (!React.isValidElement(child) || child.type !== Marker) return;
      // 生成marker实例，保留原配置和事件
      const marker = L.marker(child.props.position, child.props);
      if (child.props.children) marker.bindPopup(child.props.children);
      cluster.addLayer(marker);
    });
  }, [children]);

  return null;
};

export default MarkerClusterGroup;

使用方式和原react-leaflet-markercluster完全一致，直接放在MapContainer内部，把需要聚合的Marker作为子元素传入即可。

• 方案2：强制统一react-leaflet版本，避免多实例冲突
  如果是yarn包管理器，在package.json中新增resolutions配置：

"resolutions": {
  "react-leaflet": "^3.2.1"
}

如果是npm 8及以上版本，新增overrides配置：

"overrides": {
  "react-leaflet": "^3.2.1"
}

添加完成后删除node_modules文件夹、yarn.lock/package-lock.json文件，重新执行安装命令后重启服务。

• 方案3：拆分browserslist配置，修复编译bug
  将现有package.json中的全局browserslist配置拆分为生产和开发两套：

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

修改完成后删除node_modules/.cache文件夹，重启开发服务即可。

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