When I'm building React in a Docker container on TeamCity I get TypeError: extractedChunk.getNumberOfModules is not a function.
Our React app is set up with create-react-app, and built with react-scripts.
TeamCity is fetching the latest changes from our Git repository, building a Docker image in which it runs npm install and then binds the command npm run build to docker run.
This gives the following error when running:
[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! [email protected] 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 [email protected] 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
We've reverted our package.json to the last working state, and building works both locally and locally in docker image. But the error still persists on TeamCity.
The error originated in a mismatch of versions of packages, probably React itself. Since we created our react app with create-react-app, which bundles Webpack, we could not upgrade React ourselves.
Since we got it working both locally, and locally in a docker container identical to that on TeamCity we figured something was wrong on TeamCity. Cached packages perhaps?
We solved the issue by instead of doing the normal docker run we added bash -c "npm run build" to our docker run. This worked, unknown why. But as said before, this probably reset cache or something. Another option might have been to run a build with clean cache using the delete all files in the checkout directory before the build option.