React+TypeScript项目集成ArcGIS JS API找不到esri/Map模块如何解决

AI 小北

2026-10-15

报错原因

你当前混用了ArcGIS JS API的AMD CDN加载方式和ES模块导入语法，旧版arcgis-js-api属于AMD规范模块，Create React App默认的Webpack配置无法直接解析esri/开头的模块路径，因此触发模块找不到的编译错误。

解决方案（推荐使用ESM版本适配React+TS项目）

步骤1：替换依赖包

先卸载旧的无效依赖，安装官方推荐的ESM版本ArcGIS核心包：

npm uninstall arcgis-js-api @types/arcgis-js-api
npm install @arcgis/core

@arcgis/core已内置完整TypeScript类型定义，无需额外安装类型包。

步骤2：清理HTML冗余配置

删除public/index.html中之前添加的所有ArcGIS相关link、dojoConfig配置、script引入标签，ESM版本无需通过CDN引入全局资源。

步骤3：修改Map2D组件代码

修正导入路径，将地图初始化逻辑移入useEffect避免重复实例化，补充销毁逻辑防止内存泄漏：

import { useRef, useEffect } from 'react';
// 导入ArcGIS核心样式
import '@arcgis/core/assets/esri/themes/light/main.css';
// 替换为ESM包的导入路径
import EsriMap from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";

const Map2D = () => {
  const theView = useRef<HTMLDivElement>(null);
  // 存储MapView实例用于销毁
  const viewRef = useRef<MapView | null>(null);

  useEffect(() => {
    // 只在组件挂载后初始化一次
    if (theView.current && !viewRef.current) {
      const map = new EsriMap({
        basemap: "streets-vector"
      });

      viewRef.current = new MapView({
        map: map,
        container: theView.current,
        center: [-118.244, 34.052],
        zoom: 12
      });
    }

    // 组件卸载时销毁地图实例释放资源
    return () => {
      if (viewRef.current) {
        viewRef.current.destroy();
        viewRef.current = null;
      }
    }
  }, []);

  return (
    <div ref={theView} style={{ width: '100%', height: '100%', margin: '0', padding: '0' }}>      
    </div>
  );
}

export default Map2D;