React集成HERE Maps API报错__webpack_require__未定义求助

方案一：改用CDN引入（最快捷，避免webpack配置问题） #

HERE Maps的npm包依赖webpack特定变量，在React项目（尤其是Create React App）中容易出现环境不兼容问题，改用CDN引入可直接绕过：

1. 在项目public/index.html的<head>中添加CDN脚本：

<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" charset="utf-8"></script>

2. 修改你的Map组件代码，移除npm包导入，直接使用全局window.H对象，并添加内存清理逻辑：

import React, { useEffect, useRef } from 'react';

const Map = (props) => {
  const mapRef = useRef(null);
  const map = useRef(null);
  const platform = useRef(null);
  const { apikey } = props;

  useEffect(() => {
    // 确保HERE Maps脚本已加载完成
    if (!window.H || map.current) return;

    // 初始化平台
    platform.current = new window.H.service.Platform({ apikey });
    // 创建栅格瓦片服务
    const rasterTileService = platform.current.getRasterTileService({
      queryParams: {
        style: "explore.day",
        size: 512,
      },
    });
    const rasterTileProvider = new window.H.service.rasterTile.Provider(rasterTileService);
    const rasterTileLayer = new window.H.map.layer.TileLayer(rasterTileProvider);

    // 初始化地图实例
    const newMap = new window.H.Map(mapRef.current, rasterTileLayer, {
      pixelRatio: window.devicePixelRatio,
      center: { lat: 64.144, lng: -21.94 },
      zoom: 14,
    });

    // 添加交互行为
    new window.H.mapevents.Behavior(new window.H.mapevents.MapEvents(newMap));

    map.current = newMap;

    // 组件卸载时清理地图实例，避免内存泄漏
    return () => {
      if (map.current) {
        map.current.dispose();
        map.current = null;
      }
    };
  }, [apikey]);

  return <div style={{ width: "100%", height: "350px" }} ref={mapRef} />;
};

export default Map;

方案二：调整webpack配置（适合自定义webpack或使用craco/rewired的项目） #

如果坚持使用npm包，需要解决webpack环境变量兼容问题：

针对Webpack 5（Create React App默认使用） #

原官方文档中的node: { global: false }配置已被移除，需替换为以下配置：

1. 如果你使用Create React App，先安装craco来覆盖默认配置：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js：

const webpack = require('webpack');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 将window对象映射为global，适配HERE Maps的依赖
      webpackConfig.plugins.push(
        new webpack.ProvidePlugin({
          global: 'window',
        })
      );

      // 配置webpack5的fallback选项
      webpackConfig.resolve.fallback = {
        ...webpackConfig.resolve.fallback,
        global: false,
      };

      return webpackConfig;
    },
  },
};

3. 修改package.json中的启动脚本，替换react-scripts为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

4. 重启项目，你的原组件代码即可正常运行（建议添加方案一中的清理函数）。

问题原因说明 #

__webpack_require__ is not defined报错是因为@here/maps-api-for-javascript包内部依赖了Webpack构建时生成的私有变量，但React项目的浏览器环境中不存在该变量。CDN方式直接在全局环境加载API，避开了Webpack的模块依赖问题；而调整Webpack配置则是通过映射全局对象来适配包的依赖需求。

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