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

Question

当我在 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 上。

Answer 1

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

由于我们在本地和本地都在与 TeamCity 上相同的 docker 容器中工作，因此我们发现 TeamCity 上出现了问题。也许是缓存包？

我们通过将 bash -c "npm run build" 添加到 docker 运行而不是正常的 docker run 来解决问题。这有效，未知原因。但如前所述，这可能会重置缓存或其他内容。另一个选择可能是运行使用 delete all files in the checkout directory before the build 选项使用干净的缓存构建。

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

Error in Webpack when building react in docker on TeamCity

teamcity

docker

reactjs

webpack

create-react-app