Vue JS build failing on GitLab pipeline-CodePudding

We have a Vue JS 2 docker based application. We are using GitLab for code repository and CI/CD pipeline has been enables for deployment. It was building and deploying properly with older versions of @vue/cli-service packages. Package versions given below.

"devDependencies": {
    "@vue/cli-plugin-babel": "4.5.11",
    "@vue/cli-plugin-eslint": "4.5.11",
    "@vue/cli-plugin-router": "4.5.11",
    "@vue/cli-plugin-vuex": "4.5.11",
    "@vue/cli-service": "4.5.11",
    "eslint": "6.8.0",
.....

But these version has vulnerabilities. So we have planned to upgrade the versions. So we have upgraded to latest versions. Those are listed below.

"devDependencies": {
    "@vue/cli-plugin-babel": "5.0.8",
    "@vue/cli-plugin-eslint": "5.0.8",
    "@vue/cli-plugin-router": "5.0.8",
    "@vue/cli-plugin-vuex": "5.0.8",
    "@vue/cli-service": "5.0.8",
    "eslint": "6.8.0",
...

But the problem is after upgrading to these version CI/CD pipelines got failed. Locally I can build it properly

Below is the build error showing in the GitLab pipeline.

 ERROR  Error: Build failed with errors.
Error: Build failed with errors.
    at /build/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23
    at /build/node_modules/webpack/lib/webpack.js:148:8
    at /build/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/build/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/build/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.shutdown (/build/node_modules/webpack/lib/Cache.js:150:23)
    at /build/node_modules/webpack/lib/Compiler.js:1225:15
    at Hook.eval [as callAsync] (eval at create (/build/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/build/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.close (/build/node_modules/webpack/lib/Compiler.js:1218:23)
    at /build/node_modules/webpack/lib/webpack.js:147:16
    at finalCallback (/build/node_modules/webpack/lib/Compiler.js:441:32)
    at /build/node_modules/webpack/lib/Compiler.js:458:13
    at Hook.eval [as callAsync] (eval at create (/build/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/build/node_modules/tapable/lib/Hook.js:18:14)
    at onCompiled (/build/node_modules/webpack/lib/Compiler.js:456:21)
    at /build/node_modules/webpack/lib/Compiler.js:1196:17
    at Hook.eval [as callAsync] (eval at create (/build/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/build/node_modules/tapable/lib/Hook.js:18:14)
    at /build/node_modules/webpack/lib/Compiler.js:1192:33
    at finalCallback (/build/node_modules/webpack/lib/Compilation.js:2787:11)
    at /build/node_modules/webpack/lib/Compilation.js:3092:11
    at Hook.eval [as callAsync] (eval at create (/build/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/build/node_modules/tapable/lib/Hook.js:18:14)
    at /build/node_modules/webpack/lib/Compilation.js:3085:38
    at eval (eval at create (/build/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at eval (eval at create (/build/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
 ERROR  Failed to compile with 5 errors2:04:56 PM
[eslint] ESLint is not a constructor
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
 error  in ../build/node_modules/axios/lib/adapters/xhr.js
export 'default' (imported as 'buildFullPath') was not found in '../core/buildFullPath.js' (module has no exports)
 error  in ../build/node_modules/axios/lib/axios.js
export 'default' (imported as 'spread') was not found in './helpers/spread.js' (module has no exports)
 error  in ../build/node_modules/axios/lib/core/Axios.js
export 'default' (imported as 'buildFullPath') was not found in './buildFullPath.js' (module has no exports)
  Error: Child compilation failed:
  [eslint] ESLint is not a constructor
  
  - child-compiler.js:169 
    [build]/[html-webpack-plugin]/lib/child-compiler.js:169:18
  
  - Compiler.js:551 finalCallback
    [build]/[webpack]/lib/Compiler.js:551:5
  
  - Compiler.js:577 
    [build]/[webpack]/lib/Compiler.js:577:11
  
  - Compiler.js:1196 
    [build]/[webpack]/lib/Compiler.js:1196:17
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [build]/[tapable]/lib/Hook.js:18:14
  
  - Compiler.js:1192 
    [build]/[webpack]/lib/Compiler.js:1192:33
  
  - Compilation.js:2787 finalCallback
    [build]/[webpack]/lib/Compilation.js:2787:11
  
  - Compilation.js:3092 
    [build]/[webpack]/lib/Compilation.js:3092:11

Could you please someone help me to resolve it?

CodePudding user response：

OP bumped Gitlab's Node version to v18 (or at least 16) to have it working again.