'PropertyPaneCustomField' is missing from '@microsoft/sp-property-pane' - SPFx 1.19.0

Question

I was following the below article to create custom property pane fields.

https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-web-part-property-pane/4-build-custom-property-pane-controls

But when I tried to import 'PropertyPaneCustomField' from '@microsoft/sp-property-pane', it was giving me error 'no exported member named 'PropertyPaneCustomField'. Did you mean 'IPropertyPaneCustomFieldProps'?'

Does that mean I have to follow the old approach of creating custom property pane controls using 'IPropertyPaneCustomFieldProps' and 'IPropertyPaneField' from now on ?

Answer 1

From SPFx version 1.19.0 PropertyPaneCustomField is excluded from the '@microsoft/sp-property-pane' package. (mentioned in node_modules@microsoft\sp-property-pane\dist\index-internal.d.ts. Many others are also excluded.)

No idea why.! But Microsoft learn documentation still teaches us to use it even in SPFx v1.19.0

Below text is copied from Chat GPT response (for my own reference :-)).

Old Approach

In the earlier versions of SPFx, creating a custom field involved the following steps:

1. Define the Custom Field: You would define the custom field by implementing the IPropertyPaneCustomFieldProps interface. This interface includes properties like key, onRender, and onDispose.

2. Implement the Custom Field: You would then implement the custom field by creating a function that returns an object of type IPropertyPaneField<IPropertyPaneCustomFieldProps>. This function would handle the rendering and disposal of the custom field.

3. Use the Custom Field: Finally, you would use the custom field in your web part's property pane configuration by calling the function you created and passing the necessary properties.

Here's a simplified example:

import { IPropertyPaneCustomFieldProps, IPropertyPaneField } from '@microsoft/sp-property-pane';

export interface IMyCustomFieldProps extends IPropertyPaneCustomFieldProps {
  // Custom properties
}

export function MyCustomField(properties: IMyCustomFieldProps): IPropertyPaneField<IMyCustomFieldProps> {
  return {
    type: PropertyPaneFieldType.Custom,
    targetProperty: properties.key,
    properties: {
      key: properties.key,
      onRender: (elem: HTMLElement) => {
        // Custom rendering logic
      },
      onDispose: (elem: HTMLElement) => {
        // Custom disposal logic
      }
    }
  };
}

This approach allowed for a high degree of customization but required more manual setup and handling of the rendering and disposal processes.

Sources: (1) Build custom controls for the property pane | Microsoft Learn. https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/build-custom-property-pane-controls. (2) SPFx Property Pane Controls - SharePoint & Microsoft Power ... - SPGuides. https://www.spguides.com/sharepoint-client-side-web-part-configurable-properties-in-property-pane-using-spfx/. (3) @microsoft/sp-property-pane package | Microsoft Learn. https://learn.microsoft.com/en-us/javascript/api/sp-property-pane?view=sp-typescript-latest.