ArcGIS API加载失败：安装esri-loader与@esri/react-arcgis后无法加载地图

报错核心原因 #

• 依赖冲突：同时安装了esri-loader、arcgis-js-api、@arcgis/webpack-plugin三类ArcGIS相关依赖，三者作用互斥，混用会导致API加载逻辑冲突
• 代码参数错误：MapView配置项的center属性为空数组，必须传入有效的经纬度坐标值
• 生命周期逻辑缺陷：useEffect未指定依赖数组，会重复触发加载逻辑，引发加载异常
• 默认CDN加载不稳定：国内网络环境下默认的ArcGIS境外CDN经常加载超时，也会触发该报错

解决方案（二选一即可） #

方案1：保留esri-loader远程加载模式（实现简单，无需修改webpack配置） #

1. 先卸载冲突依赖，执行命令：
   npm uninstall arcgis-js-api @arcgis/webpack-plugin
2. 修改component/Map/Map.js代码如下：

import React , {useRef,useEffect} from 'react';
import {loadModules, setDefaultOptions} from "esri-loader";

// 全局指定ArcGIS API版本和CDN地址
setDefaultOptions({
  url: "https://js.arcgis.com/4.21/",
  css: true
})

function Map() {
    const MapElement=useRef(null)
    // 加空依赖数组，仅组件挂载时执行一次
    useEffect(()=>{
        let view;

    loadModules(["esri/views/MapView", "esri/WebMap"]).then(([MapView, WebMap])=>{
        const webmap= new WebMap({
            basemap:'topo-vector'
        })
        view = new MapView({
            map:webmap,
            // 填入有效经纬度，示例为北京坐标
            center:[116.4074, 39.9042],
            zoom:8,
            container:MapElement.current
        })
    }).catch(err => {
      // 打印加载错误方便进一步排查
      console.log("ArcGIS加载错误：", err)
    })
    return()=>{
        if(!!view){
            view.destroy()
            view=null
        }
    }
    }, [])
    return (
        <div style={{height:800}} ref={MapElement}>
            
        </div>
    )
}

export default Map

方案2：使用本地arcgis-js-api打包模式（加载更稳定，无CDN依赖） #

1. 卸载esri-loader相关依赖，执行命令：
   npm uninstall esri-loader @esri/react-arcgis
2. 在webpack配置中添加@arcgis/webpack-plugin配置，示例配置片段：

const ArcGISPlugin = require('@arcgis/webpack-plugin');

module.exports = {
  // 其他原有配置
  plugins: [
    new ArcGISPlugin()
  ]
}

3. 直接导入ArcGIS模块使用，无需loadModules，修改Map组件代码如下：

import React , {useRef,useEffect} from 'react';
import MapView from '@arcgis/core/views/MapView';
import WebMap from '@arcgis/core/WebMap';
import '@arcgis/core/assets/esri/themes/light/main.css';

function Map() {
    const MapElement=useRef(null)
    useEffect(()=>{
        let view = new MapView({
            map: new WebMap({
                basemap:'topo-vector'
            }),
            center:[116.4074, 39.9042],
            zoom:8,
            container:MapElement.current
        })
        return()=>{
            if(!!view){
                view.destroy()
                view=null
            }
        }
    }, [])
    return (
        <div style={{height:800}} ref={MapElement}>
            
        </div>
    )
}

export default Map

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