在TeamCity的Docker容器构建React时遇Webpack TypeError错误

这个问题我之前帮不少开发者排查过，核心原因是extract-text-webpack-plugin和你项目依赖的webpack版本不兼容。因为你的项目基于create-react-app（react-scripts）搭建，它已经封装了webpack的版本，一旦extract-text-webpack-plugin的版本和内置webpack不匹配，就会触发这类方法不存在的报错。

具体解决方案 #

1. 移除手动安装的extract-text-webpack-plugin（如果有） #

如果你的项目里手动安装过这个插件，先卸载它：

npm uninstall extract-text-webpack-plugin
# 或者用yarn
yarn remove extract-text-webpack-plugin

新版本的create-react-app已经改用mini-css-extract-plugin处理CSS提取，不需要再依赖extract-text-webpack-plugin了。如果是你自定义了webpack配置用到它，记得替换成mini-css-extract-plugin并同步更新配置逻辑。

2. 清理依赖缓存并重新安装 #

Docker容器里的依赖缓存很容易导致旧版本依赖残留，建议在构建步骤里加入清理逻辑：

• 在Dockerfile中，先删除旧的node_modules和锁文件：

# 复制package文件前先清理（如果是多阶段构建的话）
RUN rm -rf node_modules package-lock.json yarn.lock
COPY package*.json ./
RUN npm ci  # 用npm ci代替npm install，严格按照锁文件安装依赖，避免版本漂移

• 或者在docker run命令里强制清理缓存：

docker run --rm -v $(pwd):/app node:16-alpine sh -c "rm -rf node_modules package-lock.json && npm install && npm run build"

3. 锁定react-scripts版本 #

确保你的package.json里react-scripts是固定版本，避免自动升级带来的webpack版本变化：

"dependencies": {
  "react-scripts": "5.0.1"  // 用具体版本号，不要用^或~
}

如果最近升级过react-scripts，建议回退到之前稳定的版本，或者确认所有依赖都兼容新版本的webpack。

4. 强制指定兼容的extract-text-webpack-plugin版本 #

如果是某个第三方依赖间接引入了旧版本的extract-text-webpack-plugin，你可以用npm的overrides或者yarn的resolutions强制指定兼容版本：

• npm用户，在package.json中添加：

"overrides": {
  "extract-text-webpack-plugin": "4.0.0-beta.0"  // 这个版本兼容webpack 4，适配react-scripts 4+
}

• yarn用户，在package.json中添加：

"resolutions": {
  "extract-text-webpack-plugin": "4.0.0-beta.0"
}

添加后重新执行npm install或yarn install，再重新构建。

5. 验证本地构建是否正常 #

先在本地环境执行npm run build，如果本地能正常构建，说明问题出在Docker的缓存或构建环境上，此时可以清理Docker的构建缓存：

docker builder prune

然后重新执行TeamCity的构建任务。

内容的提问来源于stack exchange，提问作者Per Enström