Office 365 – SharePoint Online – SPFX issue in webpart.manifests.json – WebPart Id – String does not match the pattern of “^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$”

Hi All,

Today new issue and solution 🙂

Background : I am working on one of the Office 365 Intranet project. We are developing SPFX component. In one of the scenario we need to change the web part id and so I created new GUID and replaces with original Id in”WebPart.manifest.json” as 

Web Part with original GUID:

Fig1 : Office 365 – SharePoint Online : SPFX web part : webpart.manifests.json file with original Id

WebPart with new GUID:

Fig2 : Office 365 – SharePoint Online : SPFX web part : webpart.manifests.json file with new Id

I didn’t realize the warning which is coming under new replaced GUID as shown in below figure

FIg3: Office 365 – SharePoint Online : SPFX web part – warning for the new GUID replaced with original one

I started with following commands

gulp clean = > Successfully executed
gulp build = > Successfully executed
gulp bundle –ship =>Failed with following error:

String does not match the pattern of”^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$”.


A universally unique component id. Each client side component is required to have this id. Once an id has been used for a component, it cannot be changed. A change in this value is treated same as the creation of a new component. Two components are never expected to have the same id.

[11:31:59]Error – [write-manifests] Manifest validation error(./src/webparts/followedSites/FollowedSitesWebPart.manifest.json):
(#/)Data does not match any schemas from ‘oneOf’
(#/)Missing required property: description
(#/)Missing required property: extensionType
(#/component Type)No enum match for: WebPart
(#/id)String does not match pattern^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$:ABA304B8-E7DE-4CC0-A2CC-083E07AC5E2A
(#/)Missing required property: items
(#/)Missing required property: root ComponentId
About to exit with code: 0
Process terminated before summary could be written, possible error in async code not continuing!
Trying to exit with exit code 1

Solution: As gulp bundle –ship command failed with above issue.

Then I looked into the warning and realize the issue. I notice the difference between web part IDs.

The original ID of the web part in small letter and ID which I manually updated is in capital letters. Then I saw the regular expression which is in error and warning as well – ^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$ So I changed the new ID with small letters and I could execute gulp bundle –ship command successfully.

This seems to be weird issue but it’s by design. I didn’t understand the logic behind this.

Conclusion / Take away: Always use GUID in small case letters.  

Thanks for reading 🙂

Keep reading, share your thoughts, experiences. Feel free to contact us to discuss more. If you have any suggestion / feedback / doubt, you are most welcome.

Stay tuned on Knowledge-Junction, will come up with more such articles

Prasham Sabadra

LIFE IS VERY BEAUTIFUL :) ENJOY THE WHOLE JOURNEY :) Founder of Knowledge Junction and, Author, Learner, Passionate Techie, avid reader. Certified Professional Workshop Facilitator / Public Speaker. Scrum Foundation Professional certificated. Motivational, Behavioral , Technical speaker. Speaks in various events including SharePoint Saturdays, Boot camps, Collages / Schools, local chapter. Can reach me for Microsoft 365, Azure, DevOps, SharePoint, Teams, Power Platform, JavaScript.

You may also like...

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: