SPFX webpart Error: The value for “Custom field key” must not be undefined

Question

The sharepoint framework webpart with custom property stops working all the sudden and displaying this error message:

sp-webpart-workbench-assembly_en-us_36f8e2c….js:254 Uncaught (in promise) Error: ***The value for "Custom field key" must not be undefined
at Function.e.isNotNullOrUndefined (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-16.015/sp-webpart-workbench-assembly_en-us_36f8e2c2f3b738608cda74036a78fd8d.js:254:1058)
at Function.e.isNonemptyString (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-16.015/sp-webpart-workbench-assembly_en-us_36f8e2c2f3b738608cda74036a78fd8d.js:254:1163)
at t._renderGroupField (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-16.015/0.sp-webpart-base-propertypane_671c25e8d6f780a9556d.js:1:28447)
at https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-16.015/0.sp-webpart-base-propertypane_671c25e8d6f780a9556d.js:1:28259
at Array.map (native)
at t._renderGroupContent (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-16.015/0.sp-webpart-base-propertypane_671c25e8d6f780a9556d.js:1:28234)
at t.render (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-16.015/0.sp-webpart-base-propertypane_671c25e8d6f780a9556d.js:1:26942)
at p._renderValidatedComponentWithoutOwnerOrContext (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-16.015/sp-webpart-workbench-assembly_en-us_36f8e2c2f3b738608cda74036a78fd8d.js:155:50265)
at p._renderValidatedComponent (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-16.015/sp-webpart-workbench-assembly_en-us_36f8e2c2f3b738608cda74036a78fd8d.js:155:50392)
at performInitialMount (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-16.015/sp-webpart-workbench-assembly_en-us_36f8e2c2f3b738608cda74036a78fd8d.js:155:46233)

What is Error: The value for "Custom field key" must not be undefined means? And how do I add the Custom field key?

The same issue is posted here: https://github.com/SharePoint/sp-dev-docs/issues/674

Answer 1

Thanks for raising the concern.

The reason you are seeing this is when you create a custom field you have to provide a unique key to it. This property is there for some time now and it was always a required field. The recent change we made in this regard is that we are now validating it to have a non-empty value. The reason we had to validate is that it introduces an issue while rendering the custom fields on the property pane. If you are passing an undefined or null or empty value for the key prop then you will see this error.

/**

A UNIQUE key indicates the identity of this control.

The PropertyPane uses ReactJS to render its components. ReactJS uses keys to identify a component and if it should be re-rendered or not. This is a performance feature in ReactJS. Please read the following link to understand how to pick the value of the key.

@see https://facebook.github.io/react/docs/lists-and-keys.html#keys

*/

key: string;

So, the resolution for this would be that you have to pass in a non-empty value for that prop.

Please let me know if you need any more guidance in this regard.

Thanks for understanding,

Srikanth