dynamicproppane.ts

export default class SiteInformationWebPart extends BaseClientSideWebPart<ISiteInformationWebPartProps> {

  private propertyFieldTermPicker;
  private propertyFieldPeoplePicker;
  private principalType;

  //onInit(), render() functions removed for brevity
  
  //function executes only before property pane is loaded.
  protected async loadPropertyPaneResources(): Promise<void> {

    const { PropertyFieldTermPicker } = await import (
      /* webpackChunkName: 'pnp-propcontrols-termpicker' */
      '@pnp/spfx-property-controls/lib/PropertyFieldTermPicker'
    );
    const { PropertyFieldPeoplePicker, PrincipalType } = await import (
      /* webpackChunkName: 'pnp-propcontrols-peoplepicker' */
      '@pnp/spfx-property-controls/lib/PropertyFieldPeoplePicker'
    );

    this.propertyFieldTermPicker = PropertyFieldTermPicker;
    this.propertyFieldPeoplePicker = PropertyFieldPeoplePicker;
    this.principalType = PrincipalType;
  }
  
  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                this.propertyFieldPeoplePicker('siteContact', {
                  label: strings.SiteContactFieldLabel,
                  initialData: this.properties.siteContact,
                  principalType: [this.principalType.Users],
                  //other properties removed for brevity
                }),
                this.propertyFieldTermPicker('siteOrganization', {
                  label: strings.SiteOrganizationFieldLabel,
                  panelTitle: strings.SiteOrganizationPanelTitle,
                  initialValues: this.properties.siteOrganization
                  //other properties removed for brevity
                })
              ]
            }
          ]
        }
      ]
    };
  }
}