npm ci failed on ui.frontend com.github.eirslett

[Cross_Leaf]

hey guys,

Getting the below error -

[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.12.0:npm (npm ci) on project aem-website.ui.frontend: Failed to run task: 'npm ci' failed. org.apache.commons.exec.ExecuteException: Process exited with an error: 1 (Exit value: 1) -> [Help 1]
[ERROR]

Followed the thread at npm ci failed error

Running the solution does nothing -

npm install -g npm

npm install -g npm

removed 1 package, and changed 21 packages in 2s

22 packages are looking for funding
run `npm fund` for details

Here are my nodejs and npm versions -

node -v --> v20.17.0

npm -v --> 10.8.3

The pom.xml has the following versions declared -

<nodeVersion>v16.17.0</nodeVersion>
<npmVersion>8.15.0</npmVersion>

Should I downgrade my versions & try?
Even so, why would the latest LTE version throw this error?

detailed error logs are -

231 verbose stack Error:
231 verbose stack `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
231 verbose stack
231 verbose stack Missing: vue@3.5.6 from lock file
231 verbose stack Missing: vue-loader@17.4.2 from lock file
231 verbose stack Missing: vue-style-loader@4.1.3 from lock file
231 verbose stack Missing: vue-template-compiler@2.7.16 from lock file
231 verbose stack Missing: @vue/compiler-dom@3.5.6 from lock file
231 verbose stack Missing: @vue/compiler-sfc@3.5.6 from lock file
231 verbose stack Missing: @vue/runtime-dom@3.5.6 from lock file
231 verbose stack Missing: @vue/server-renderer@3.5.6 from lock file
231 verbose stack Missing: @vue/shared@3.5.6 from lock file
231 verbose stack Missing: @vue/compiler-core@3.5.6 from lock file
231 verbose stack Invalid: lock file's @babel/parser@7.19.1 does not satisfy @babel/parser@7.25.6
231 verbose stack Missing: entities@4.5.0 from lock file
231 verbose stack Missing: estree-walker@2.0.2 from lock file
231 verbose stack Invalid: lock file's source-map-js@1.0.2 does not satisfy source-map-js@1.2.1
231 verbose stack Invalid: lock file's @babel/types@7.19.0 does not satisfy @babel/types@7.25.6
231 verbose stack Invalid: lock file's @babel/helper-string-parser@7.18.10 does not satisfy @babel/helper-string-parser@7.24.8
231 verbose stack Invalid: lock file's @babel/helper-validator-identifier@7.19.1 does not satisfy @babel/helper-validator-identifier@7.24.7
231 verbose stack Missing: @vue/compiler-ssr@3.5.6 from lock file
231 verbose stack Missing: magic-string@0.30.11 from lock file
231 verbose stack Invalid: lock file's postcss@8.4.16 does not satisfy postcss@8.4.47
231 verbose stack Missing: @vue/reactivity@3.5.6 from lock file
231 verbose stack Missing: @vue/runtime-core@3.5.6 from lock file
231 verbose stack Missing: csstype@3.1.3 from lock file
231 verbose stack Invalid: lock file's @jridgewell/sourcemap-codec@1.4.14 does not satisfy @jridgewell/sourcemap-codec@1.5.0
231 verbose stack Invalid: lock file's nanoid@3.3.4 does not satisfy nanoid@3.3.7
231 verbose stack Invalid: lock file's picocolors@1.0.0 does not satisfy picocolors@1.1.0
231 verbose stack Missing: chalk@4.1.2 from lock file
231 verbose stack Missing: hash-sum@2.0.0 from lock file
231 verbose stack Missing: hash-sum@1.0.2 from lock file
231 verbose stack Missing: loader-utils@1.4.2 from lock file
231 verbose stack Missing: de-indent@1.0.2 from lock file
231 verbose stack Missing: ansi-styles@4.3.0 from lock file
231 verbose stack Missing: supports-color@7.2.0 from lock file
231 verbose stack Missing: color-convert@2.0.1 from lock file
231 verbose stack Missing: color-name@1.1.4 from lock file
231 verbose stack Missing: has-flag@4.0.0 from lock file
231 verbose stack Missing: json5@1.0.2 from lock file
231 verbose stack

231 verbose stack `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.

[Rohan_Garg · Accepted solution]

Hi @Cross_Leaf, 

The issue seems to be with the VueJS files inclusion which are missing in package-lock.json
Can you try deleting the package-lock.json then rebuilding the module?

If that fails, then can you try to delete the VueJS dependencies defined in the ui.frontend module?

If possible please share the package.json from the frontend module?

Update - Simply running "npm install" on ui.frontend module will update your package-lock.json
I re-traced the blog and got the below error - 

[INFO] npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.

Hope this helps!

[Cross_Leaf]

Removing the package-lock didn't help! But removing the VueJS dependencies worked!

Any idea what's wrong in that?

[Rohan_Garg]

Not sure how the VueJS dependencies were incorporated but might want to refer to below blogs - 
https://medium.com/@jlanssie/use-vue-js-in-adobe-experience-manager-59bc7e098efd

@Sady_Rifat 's blog https://sadyrifat.medium.com/seamless-integration-of-vue-js-in-aem-project-a-step-by-step-guide-for-...

Also you might want to send package.json or share the steps as to how you incorporated vue.js

[Cross_Leaf]

I've messaged you the package.json in the chat! Can you take a look at it?

I've been following the first blog link that you posted