[SOLVED] WebPack css-loader failure in Team City

WebPack css-loader failure in Team City

I'm authorig a Team City build configuration for a web site (Done using VueJs). It uses yarn for building the web site and the problem is around web pack which it uses to bundle the final resources.

So the build is as simple as doing yarn run build

The build works fine locally. However in Team City it fails with the following error in css-loader web pack task.

[15:13:08][Step 7/8] ERROR in ./~/css-loader!./~/vue-loader/lib/style-compiler?{"id":"data-v-45a5b6de","scoped":false,"hasInlineConfig":true}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
[15:13:08][Step 7/8] Module build failed: SyntaxError: Unexpected token {
[15:13:08][Step 7/8]     at exports.runInThisContext (vm.js:53:16)
[15:13:08][Step 7/8]     at Module._compile (module.js:373:25)
[15:13:08][Step 7/8]     at Object.Module._extensions..js (module.js:416:10)
[15:13:08][Step 7/8]     at Module.load (module.js:343:32)
[15:13:08][Step 7/8]     at Function.Module._load (module.js:300:12)
[15:13:08][Step 7/8]     at Module.require (module.js:353:17)
[15:13:08][Step 7/8]     at require (internal/module.js:12:17)
[15:13:08][Step 7/8]     at loadLoader (D:\Program Files\BuildAgent3\work\140b0e3b148e7b10\Main\MyApp\node_modules\loader-runner\lib\loadLoader.js:13:17)
[15:13:08][Step 7/8]     at iteratePitchingLoaders (D:\Program Files\BuildAgent3\work\140b0e3b148e7b10\Main\MyApp\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
[15:13:08][Step 7/8]     at iteratePitchingLoaders (D:\Program Files\BuildAgent3\work\140b0e3b148e7b10\Main\MyApp\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
[15:13:08][Step 7/8]     at D:\Program Files\BuildAgent3\work\140b0e3b148e7b10\Main\MyApp\node_modules\loader-runner\lib\LoaderRunner.js:173:18
[15:13:08][Step 7/8]     at loadLoader (D:\Program Files\BuildAgent3\work\140b0e3b148e7b10\Main\MyApp\node_modules\loader-runner\lib\loadLoader.js:36:3)
[15:13:08][Step 7/8]     at iteratePitchingLoaders (D:\Program Files\BuildAgent3\work\140b0e3b148e7b10\Main\MyApp\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
[15:13:08][Step 7/8]     at runLoaders (D:\Program Files\BuildAgent3\work\140b0e3b148e7b10\Main\MyApp\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
[15:13:08][Step 7/8]     at NormalModule.doBuild (D:\Program Files\BuildAgent3\work\140b0e3b148e7b10\Main\MyApp\node_modules\webpack\lib\NormalModule.js:179:3)
[15:13:08][Step 7/8]     at NormalModule.build (D:\Program Files\BuildAgent3\work\140b0e3b148e7b10\Main\MyApp\node_modules\webpack\lib\NormalModule.js:268:15)
[15:13:08][Step 7/8]  @ ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-compiler?{"id":"data-v-45a5b6de","scoped":false,"hasInlineConfig":true}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-261
[15:13:08][Step 7/8]  @ ./src/App.vue
[15:13:08][Step 7/8]  @ ./src/main.js

I have checked few things like;

Compare node versions (Server has node 4.x while client has 6.x)
Compare npm versions (Both have 3.10.x)
Compare node_modules locally and in Team City server
Check whether .babelrc file is available in Team City
Check node/npm version in the server
Preceed the build with a npm cache clean and do a fresh npm install

Since we don't own this 'code' it's hard for me to do any code changes. Also none of us have prior experience on VueJs or WebPack. On the other hand it works locally. Could it be the node version?

Any ideas or pointers are much appreciated.

Solution

This ended up being a limitation with version of Node 4 in TeamCity server. After upgrading to Node 6, it started working fine.