esri-leaflet-geocoder生产环境不渲染 如何对接地理编码服务

前期准备 #

已完成ArcGIS Online地理编码服务注册流程，成功获取对应的API密钥，开发环境下插件功能运行正常，切换到生产环境后，搜索组件无法正常完成页面渲染。

初次配置与首次报错 #

最初参照项目官方文档的指引编写API密钥配置逻辑，参考链接为esri-leaflet-geocoder GitHub主页，代码实现如下：

var searchControl = L.esri.Geocoding.geosearch({
  providers: [
    L.esri.Geocoding.arcgisOnlineProvider({
      // 传入ArcGIS Online地理编码服务的API密钥
      useMapBounds: false,
      apikey: process.env.ESRI_API_KEY
    })
  ]
});

代码运行后控制台直接抛出错误：
TypeError: Cannot read property 'Geocoding' of undefined

配置调整后的异常状态 #

针对上述报错，查阅官方文档的最新配置写法，参考链接为Geosearch 官方API参考，调整代码逻辑：

var provider = ELG.arcgisOnlineProvider({ token: process.env.ESRI_API_KEY });

var searchControl = new ELG.Geosearch({
  useMapBounds: false,
  providers: [provider]
});

// 校验实例初始化状态
console.log('arcgisOnlineProvider 实例输出', provider);
console.log('Geosearch 组件实例输出', searchControl);

调整代码后组件依然无法正常工作，控制台日志显示两个实例均已完成初始化，携带的配置参数也符合文档要求，日志输出内容：

arcgisOnlineProvider 实例输出
NewClass {_requestQueue: Array(0), _authenticating: false, options: {…}, _initHooksCalled: true, _eventParents: {…}}
options:
  supportsSuggest: true
  token: 日志中实际打印为有效字符串
  url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/"
  __proto__: Object
_authenticating: false
_eventParents: {1: NewClass}
_initHooksCalled: true
_requestQueue: []
__proto__: NewClass


Geosearch 组件实例输出
NewClass {options: {…}, _geosearchCore: NewClass, _leaflet_id: 1, _initHooksCalled: true}
options:
  providers: Array(1)
    0: NewClass
      options: {
        token: 日志中实际打印为有效字符串,
        url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/",
        supportsSuggest: true
      }
      _authenticating: false
      _eventParents: {1: NewClass}
      _initHooksCalled: true
      _requestQueue: []
      __proto__: NewClass
    length: 1
    __proto__: Array(0)
  useMapBounds: false
  __proto__: Object

待排查需求 #

需要明确逐步定位问题的排查思路，找到导致组件无法渲染的根本原因，让searchControl搜索组件在生产环境下正常加载、运行并完成页面渲染。

内容的提问来源于stack exchange，提问作者Antonio Pavicevac-Ortiz