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}$”.

ID

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