React项目Azure Pipeline执行npm build:prod时出现globalThis未定义错误

核心原因 #

该错误本质是本地与Azure构建环境的依赖/运行时不一致，globalThis全局对象在Azure环境中未被识别，触发点集中在Sass编译环节的兼容性问题。

分步解决方案 #

1. 同步Node.js版本 #

globalThis在Node.js 12.0.0及以上版本才被支持，若Azure使用了更低版本就会报错：

• 本地执行node -v确认当前版本（比如16.18.0）
• 在Azure Pipeline的yaml配置中添加版本指定任务：

- task: NodeToolInstaller@0
  inputs:
    versionSpec: '16.x' # 替换为你本地的Node版本号
    checkLatest: false

2. 替换/更新Sass相关依赖 #

已废弃的node-sass在Azure的Linux构建代理上易出现兼容问题，建议切换至官方维护的dart-sass（npm包名为sass）：

• 卸载旧依赖并安装新依赖：

npm uninstall node-sass
npm install sass --save-dev

• 同步sass-loader版本，确保与webpack、sass兼容（webpack 5对应sass-loader@12+）：

npm install sass-loader@latest --save-dev

更新后的package.json依赖示例：

"devDependencies": {
  "sass": "^1.69.5",
  "sass-loader": "^13.3.2",
  // 其他依赖...
}

3. 添加globalThis Polyfill #

若必须兼容低版本Node.js，可手动补全globalThis：

• 在项目入口文件（如src/index.js）顶部加入：

if (typeof globalThis === 'undefined') {
  global.globalThis = global;
}

• 或使用core-js提供标准polyfill：

npm install core-js@3 --save

然后在入口文件引入：

import 'core-js/es/global-this';

4. 检查Azure构建配置 #

• 确保Azure Pipeline执行的构建命令与本地完全一致：npm run build:prod
• 确认Azure环境中设置了NODE_ENV=production，部分项目的构建逻辑依赖该变量切换生产模式

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