在 TeamCity 上的 docker 中构建反应时 Webpack 出错答案

【问题标题】：Error in Webpack when building react in docker on TeamCity在 TeamCity 上的 docker 中构建反应时 Webpack 出错
【发布时间】：2018-04-16 10:44:29
【问题描述】：

当我在 TeamCity 上的 Docker 容器中构建 React 时，我得到了TypeError: extractedChunk.getNumberOfModules is not a function。

我们的 React 应用程序使用 create-react-app 设置，并使用 react-scripts 构建。

TeamCity 正在从我们的 Git 存储库中获取最新更改，构建一个 Docker 映像，它在其中运行 npm install，然后将命令 npm run build 绑定到 docker run。

运行时出现以下错误：

[11:12:43][Step 7/16] /boost/node_modules/extract-text-webpack-plugin/dist/index.js:249
[11:12:43][Step 7/16]             if (extractedChunk.getNumberOfModules()) {
[11:12:43][Step 7/16]                                ^
[11:12:43][Step 7/16] 
[11:12:43][Step 7/16] TypeError: extractedChunk.getNumberOfModules is not a function
[11:12:43][Step 7/16]     at ExtractTextPlugin.<anonymous> (/boost/node_modules/extract-text-webpack-plugin/dist/index.js:249:32)
[11:12:43][Step 7/16]     at Array.forEach (<anonymous>)
[11:12:43][Step 7/16]     at Compilation.<anonymous> (/boost/node_modules/extract-text-webpack-plugin/dist/index.js:248:27)
[11:12:43][Step 7/16]     at Compilation.applyPluginsAsyncSeries (/boost/node_modules/tapable/lib/Tapable.js:206:13)
[11:12:43][Step 7/16]     at sealPart2 (/boost/node_modules/react-scripts/node_modules/webpack/lib/Compilation.js:662:9)
[11:12:43][Step 7/16]     at next (/boost/node_modules/tapable/lib/Tapable.js:202:11)
[11:12:43][Step 7/16]     at /boost/node_modules/extract-text-webpack-plugin/dist/index.js:244:13
[11:12:43][Step 7/16]     at /boost/node_modules/async/dist/async.js:473:16
[11:12:43][Step 7/16]     at iteratorCallback (/boost/node_modules/async/dist/async.js:1050:13)
[11:12:43][Step 7/16]     at /boost/node_modules/async/dist/async.js:958:16
[11:12:43][Step 7/16]     at /boost/node_modules/extract-text-webpack-plugin/dist/index.js:227:15
[11:12:43][Step 7/16]     at /boost/node_modules/async/dist/async.js:473:16
[11:12:43][Step 7/16]     at iteratorCallback (/boost/node_modules/async/dist/async.js:1050:13)
[11:12:43][Step 7/16]     at /boost/node_modules/async/dist/async.js:958:16
[11:12:43][Step 7/16]     at /boost/node_modules/extract-text-webpack-plugin/dist/index.js:216:21
[11:12:43][Step 7/16]     at rebuilding.forEach.cb (/boost/node_modules/react-scripts/node_modules/webpack/lib/Compilation.js:530:29)
[11:12:43][Step 7/16] npm ERR! code ELIFECYCLE
[11:12:43][Step 7/16] npm ERR! errno 1
[11:12:43][Step 7/16] npm ERR! frontend@0.1.0 build: `react-scripts build`
[11:12:43][Step 7/16] npm ERR! Exit status 1
[11:12:43][Step 7/16] npm ERR! 
[11:12:43][Step 7/16] npm ERR! Failed at the frontend@0.1.0 build script.
[11:12:43][Step 7/16] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[11:12:43][Step 7/16] 
[11:12:43][Step 7/16] npm ERR! A complete log of this run can be found in:
[11:12:43][Step 7/16] npm ERR!     /root/.npm/_logs/2018-04-16T09_12_43_555Z-debug.log

我们已将package.json 恢复到最后的工作状态，并且在本地和本地的 docker 映像中构建工作。但错误仍然存在于 TeamCity。

【问题讨论】：

标签： reactjs docker webpack teamcity create-react-app

【解决方案1】：

错误源于包版本不匹配，可能是 React 本身。由于我们使用捆绑了 Webpack 的 create-react-app 创建了我们的 React 应用程序，因此我们无法自己升级 React。

由于我们让它在本地运行，并且在与 TeamCity 相同的 docker 容器中本地运行，我们认为 TeamCity 出现了问题。可能是缓存包？

我们通过在 docker run 中添加 bash -c "npm run build" 而不是正常的 docker run 解决了这个问题。这有效，不知道为什么。但如前所述，这可能会重置缓存或其他东西。另一种选择可能是使用delete all files in the checkout directory before the build 选项运行具有干净缓存的构建。

【讨论】：