ReactJS调用ArcGIS JS API报错无法解析@arcgis/core/MapView

该报错核心触发原因是@arcgis/core包的模块导入路径写法错误，同时现有组件写法不符合React生命周期逻辑，即使路径修复也会出现地图加载异常，按以下步骤修复即可：

1. 修正模块导入路径 #

@arcgis/core 4.18及以上版本中，视图类未放在包根目录，你当前写的@arcgis/core/MapView路径不存在，需要调整导入层级：
将原有导入代码

import Map from "@arcgis/core/Map";
import WebMap from "@arcgis/core/WebMap";
import MapView from "@arcgis/core/MapView";

替换为

import Map from "@arcgis/core/Map";
import WebMap from "@arcgis/core/WebMap";
// 注意视图类统一放在views目录下
import MapView from "@arcgis/core/views/MapView";

补充：如果使用三维场景视图SceneView，对应导入路径为@arcgis/core/views/SceneView。

2. 修正React组件逻辑 #

直接在函数组件顶层初始化地图实例会导致两个问题：一是组件每次重渲染都会重复创建地图实例，二是初始化时viewDiv对应的DOM节点还未完成挂载，会触发容器不存在的报错。需要用useEffect控制初始化时机，同时增加实例销毁逻辑避免内存泄漏，另外必须给地图容器设置明确高度，否则地图会因为容器高度为0不可见。
修复后的完整组件代码：

import { useEffect, useRef } from "react";
import Map from "@arcgis/core/Map";
import WebMap from "@arcgis/core/WebMap";
import MapView from "@arcgis/core/views/MapView";

function Test() {
  const viewRef = useRef(null);

  useEffect(() => {
    const webmap = new WebMap({
      portalItem: {
        id: "e691172598f04ea8881cd2a4adaa45ba"
      }
    });

    viewRef.current = new MapView({
      map: webmap,
      container: "viewDiv"
    });

    // 组件卸载时销毁地图实例
    return () => {
      viewRef.current?.destroy();
    }
  }, []);

  return (
    <div>
      <div 
        id="viewDiv" 
        style={{ width: "100%", height: "100vh" }}
      ></div>
    </div>
  )
}

export default Test;

3. 剩余异常排查 #

如果修正路径后仍然报模块解析错误，按以下顺序排查：

• 执行npm list @arcgis/core检查本地安装的包版本，4.17及更早版本使用旧的包名arcgis-js-api，不支持当前ES模块导入方式，建议升级到4.20以上稳定版本
• 自定义Webpack配置的项目，检查resolve.alias配置是否错误拦截了@arcgis/core的路径解析
• 删除node_modules目录和对应包管理工具的lock文件后重新执行依赖安装，排除依赖安装损坏的问题

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