SPFx - Issue and resolution about changing Webpart ID

In one of the scenarios, we needed to change the web part id, so I created a new GUID and replaced with the original Id in the ”WebPart.manifest.json” file as mentioned below.

Web Part with original GUID

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

Web Part with new GUID

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

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

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

I started with the following commands.

gulp clean = > Successfully executed
gulp build = > Successfully executed
gulp bundle –ship =>Failed with following error:
The 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

It is 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 the 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 the above issue.

Then, I looked into the warning and realized the issue. I noticed the difference between web part IDs.
The original ID of the web part was in lowercase letters and the ID that I manually updated was in uppercase letters. Then, I saw the regular expression which threw the error and a 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 in lowercase letters.

Well, that worked! I could execute the gulp bundle –ship command successfully.
This seems to be a weird issue but it’s by design. I didn’t understand the logic behind this anyway.

Conclusion/Takeaway

Always use GUID in lowercase letters.