react-pages-hierarchy - App won't deploy into App Catalogue on my site; says Component ID exists more than once in current package

[kezia16]

Disclaimer

Yes

Sample

react-pages-hierarchy

Contributor(s)

@bogeorge

What happened?

I managed to successfully package the react-pages-hierarchy sample into an sppkg file, and uploaded it to my SharePoint site App Catalogue. However, I'm not able to deploy the package or add the app. The app package error message shown is "Component ID d1ba5a4d-dea3-4eb2-a8c8-c652f58cbc39 exists more than once in current package." In the Client Side Component Manifests, the 'Page Hierarchy' component name appears three times, with identical details in all three rows (unlike the other apps on my site, which only appear once each in this list). I've tried removing the react-pages-hierarchy app from my site, running gulp clean, repackaging and then adding again, but same problem persists. I'd really love to solve this, as I did get the app deployed and working on my dev site, and it was absolutely brilliant.

Steps to reproduce

1. Download the zipped react-pages-hierarchy app from GitHub (Version 1.8) to my laptop. Unzip.
2. Follow the usual process to compile (nvm install 18.20.4, nvm use 18.20.4, npm install gulp-cli yo @microsoft/[email protected] --global. Then using Terminal window in the sample's folder in Visual Studio Code, npm install, gulp build, gulp bundle --ship, gulp package-solution --ship.)
3. Upload the newly created react-pages-hierarchy.sppkg to my App Catalogue on my site.
4. Click 'Deploy' in pop-up.
5. Pop-up closes and package appears to have uploaded into the catalogue, but with errors (see screenshot).

Expected behavior

react-pages-hierarchy appears in my site's App Catalogue, but does not have a tick in the 'Deploy' column, and there is an app package error message: Component ID d1ba5a4d-dea3-4eb2-a8c8-c652f58cbc39 exists more than once in current package.

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

• Internet Explorer
• Microsoft Edge
• Google Chrome
• FireFox
• Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

What version of Node.js is currently installed on your workstation?

v18.20.4

What version of Node.js is required by the sample?

v18

Paste the results of SPFx doctor

CLI for Microsoft 365 SharePoint Framework doctor
Verifying configuration of your system for working with the SharePoint Framework

√ SharePoint Framework v1.20.0
√ Node v18.20.4
√ yo v5.0.0
√ gulp-cli v3.0.0
√ bundled typescript used

Additional environment details

The site where I'm trying to install this app is a SharePoint Online site, in a tenancy for a large organisation. I'm a site collection admin of the particular site, but our tenancy is managed by another team, so I can't change anything at the tenancy level (I don't have access to our SharePoint admin centre). My team use Windows laptops, and the two browsers most often used to view our sites are Edge and Chrome.

[Sandeep-FED]

Hey @kezia16,
Seems like there is one more webpart which has the same componentId, to resolve this please replace the id present in src/webparts/pagehierarchy/PageHierarchyWebPart.manifest.json with another guid.

You can use https://guidgenerator.com/ to generate random guid.

[kezia16]

Hey @kezia16, Seems like there is one more webpart which has the same componentId, to resolve this please replace the id present in src/webparts/pagehierarchy/PageHierarchyWebPart.manifest.json with another guid.

You can use https://guidgenerator.com/ to generate random guid.

Thank you! I tried this and the webpart now works on our site. I really appreciate your advice. 😊

[Sandeep-FED]

@hugoabernier, please close this issue since its resolved!