esri-leaflet-geocoder新老版本均报错，求助解决方法

先提个通用优化：你的Geocoder组件每次渲染都会触发地理编码请求，建议用useEffect包裹，避免重复调用，下面的解决方案都会包含这个修改。

一、旧版本（2.x）消除导出警告 #

你遇到的Should not import the named export 'version'警告，是因为旧版本模块的导出方式和ES模块规范不兼容，两种解决方式：

方式1：精准导入所需方法 #

把原来的全量导入改成只导入geocode方法，避免引入不必要的导出项：

// 替换原导入语句
import { geocode } from 'esri-leaflet-geocoder';

然后修改Geocoder组件的调用逻辑：

function Geocoder({ address }) {
  const map = useMap();

  useEffect(() => {
    geocode()
      .text(address)
      .run((err, results, response) => {
        // 加个判断，避免结果为空时报错
        if (err || !results?.results?.length) return;
        const { lat, lng } = results.results[0].latlng;
        map.setView([lat, lng], 12);
      });
  }, [address, map]);

  return null;
}

方式2：在构建工具中忽略警告 #

如果不想改导入方式，可以直接在构建配置里过滤这个警告：

• Vite：在vite.config.js中添加：

export default {
  build: {
    rollupOptions: {
      onwarn(warning, warn) {
        if (warning.message.includes("Should not import the named export 'version'")) return;
        warn(warning);
      }
    }
  }
}

• Webpack：在webpack.config.js中添加：

module.exports = {
  stats: {
    warningsFilter: [/Should not import the named export 'version'/]
  }
}

二、新版本（3.x）适配API并解决结果为空问题 #

新版本的API有重大变化，你遇到的Cannot read properties of undefined和geocode方法无法识别问题，主要是因为这几点：

1. 新版本必须用ArcGIS API Key才能调用服务
2. 原geocode()方法被移除，需要通过服务实例调用
3. 返回结果的结构完全变了

修改后的完整代码示例：

import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-geosearch/dist/geosearch.css";
import * as ELG from 'esri-leaflet-geocoder';
import { useEffect } from 'react';

const MapWrapper = () => {
  function Geocoder({ address }) {
    const map = useMap();
    // 替换成你自己的ArcGIS API Key（去ArcGIS平台免费申请）
    const API_KEY = 'YOUR_ARCGIS_API_KEY';

    useEffect(() => {
      if (!address) return;

      // 创建地理编码服务实例
      const geocoderService = ELG.service({ apikey: API_KEY });
      // 调用地理编码接口
      geocoderService.geocode({ address })
        .then((results) => {
          if (!results.features.length) {
            console.log('没找到匹配的地址');
            return;
          }
          // 新版本返回的坐标是[lng, lat]，需要反转成[lat, lng]
          const [lng, lat] = results.features[0].geometry.coordinates;
          map.setView([lat, lng], 12);
        })
        .catch(err => console.error('地理编码失败:', err));
    }, [address, map, API_KEY]);

    return null;
  }

  return (
    <div id="mapid">
      <MapContainer
        center={[40.730610, -73.935242]}
        zoom={13}
        scrollWheelZoom
        style={{ height: "500px", borderRadius: '10px' }}
      >
        <TileLayer
          attribution='Google Maps'
          url="https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
        />
        <Geocoder address={'nyc'} />
      </MapContainer>
    </div>
  );
}

export default MapWrapper;

关键修改说明： #

• 用useEffect包裹请求，只有当address或map变化时才触发
• 通过ELG.service()创建带API Key的服务实例，这是新版本的必填项
• 结果从results.features中提取，坐标格式需要反转
• 增加了空结果和错误处理，避免出现undefined报错

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