React v16项目配置ol-cesium所需Webpack别名的问题求助

云上老周

2026-5-25

解决React + create-react-app集成ol-cesium时的export 'getUid'错误

这个错误的核心原因是ol-cesium依赖Google Closure Library的goog模块，但Webpack默认无法定位到该模块的路径，所以需要手动配置Webpack别名。由于create-react-app默认隐藏了Webpack配置，下面给你两种可行的解决方案：

方案1：使用react-app-rewired（推荐，无需弹出配置）

这种方式不需要修改create-react-app的核心配置，更安全且可逆：

首先安装必要的工具依赖：

npm install react-app-rewired customize-cra --save-dev

在项目根目录创建config-overrides.js文件，写入以下配置：

const path = require('path');
const { override, addWebpackAlias } = require('customize-cra');

module.exports = override(
  addWebpackAlias({
    // 指向ol依赖的closure-library中的goog目录
    'goog': path.resolve(__dirname, 'node_modules/ol/node_modules/closure-library/closure/goog')
  })
);

修改package.json中的scripts命令，替换为react-app-rewired执行：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

重启你的开发服务器：npm start，此时应该就能正常加载ol-cesium模块了。

方案2：弹出create-react-app配置（不推荐，不可逆）

如果你可以接受不可逆的弹出操作，可以直接修改Webpack配置：

执行弹出命令：
```
npm run eject
```
注意：这个操作会把所有隐藏的配置文件暴露出来，之后无法恢复到默认的隐式配置状态。

找到项目根目录下的config/webpack.config.js，定位到resolve.alias配置段，添加goog的别名：

resolve: {
  alias: {
    // 保留原有别名，新增以下配置
    'goog': path.resolve(__dirname, '../node_modules/ol/node_modules/closure-library/closure/goog')
  },
  // 其他原有配置...
}