在Lightning Web Component中使用Esri ArcGIS JS API遇'require未定义'问题

问题原因 #

• LWC模块隔离特性：通过lightning/platformResourceLoader加载的脚本，其导出变量不会直接暴露到组件执行作用域，也不会自动挂载到全局window，直接调用require会触发未定义错误。
• 重复加载AMD加载器：你在Experience Cloud站点头部引入的ArcGIS JS API（https://js.arcgis.com/4.24）已内置AMD加载器，无需额外上传并加载独立的require.js，重复加载可能引发冲突。

解决方案 #

步骤1：移除自定义require.js静态资源 #

删除上传到Salesforce的require.js静态资源，不再通过loadScript加载它。

步骤2：修改LWC代码，正确访问全局AMD加载器 #

利用LWC的Shadow DOM特性获取宿主环境的全局window对象，从而访问ArcGIS自带的require函数，同时添加初始化标记避免renderedCallback重复执行：

import { LightningElement } from 'lwc';

export default class TestMap extends LightningElement {
    _isInitialized = false;

    renderedCallback() {
        if (this._isInitialized) return;
        this._isInitialized = true;

        // 获取全局window对象，访问ArcGIS自带的require
        const globalWindow = this.template.ownerDocument.defaultView;
        const require = globalWindow.require;

        if (!require) {
            console.error('ArcGIS AMD加载器未加载');
            return;
        }

        require([
            "esri/geometry/Extent"
        ], (Extent) => {
            const initExtent = new Extent({
                xmin: -15884312,
                ymin: 1634835,
                xmax: -6278767,
                ymax: 7505198,
                spatialReference: 102100
            });
            console.log('Extent初始化完成', initExtent);
            // 后续可将Extent用于地图初始化等操作
        }).catch(error => {
            console.error('加载ArcGIS模块失败', error);
        });
    }
}

可选：处理ArcGIS脚本加载顺序问题 #

如果存在ArcGIS脚本晚于LWC加载的情况，可添加延迟检查逻辑确保require存在后再执行：

// 替换上述获取require的逻辑
const checkRequire = () => {
    const globalWindow = this.template.ownerDocument.defaultView;
    if (globalWindow.require) {
        return Promise.resolve(globalWindow.require);
    }
    return new Promise(resolve => {
        const interval = setInterval(() => {
            if (globalWindow.require) {
                clearInterval(interval);
                resolve(globalWindow.require);
            }
        }, 100);
    });
};

checkRequire().then(require => {
    // 执行模块加载逻辑
});

关键说明 #

• LWC的封装机制要求必须通过宿主文档的defaultView访问全局对象，官方推荐使用this.template.ownerDocument.defaultView保证兼容性，而非直接使用window。
• ArcGIS JS API的AMD加载器会自动注册到全局window，无需额外加载独立的require.js，避免版本冲突。

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