PNP PeoplePicker Type 'WebPartContext' is missing the following properties from type 'BaseComponentContext'

Question

I am using spfx Peoplepicker control in my spfx react webpart solution but Peoplepicker control encountering the below error.

Error : Type 'WebPartContext' is missing the following properties from type 'BaseComponentContext': _isServedFromLocalhost, isServedFromLocalhostts(2739) IPeoplePicker.d.ts(14, 5): The expected type comes from property 'context' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<PeoplePicker> & Readonly<IPeoplePickerProps> & Readonly<...>'

enter image description here

please comment & let me know if any additional information needed.

In the solution i am using spfx 1.11.0 version and tried different spfx 1.10.0 version but issue remains same.

Answer 1

@murb I am experiencing this same issue. I will post some code from my solution.

`export interface IPolicyWebPartProps {
    siteName:string;
    siteCollection: WebPartContext;
    description: string;
    lists: string;
    fields: any[];
    context: WebPartContext;
    listName: string ;
    isConfigured:boolean;
    isChecked:boolean;
    titleText:string;
    themeVariant: IReadonlyTheme | undefined;
    dateSigned: any;
    checkboxLabel:string;
    CheckboxPlaceholder:string;
    hasLicence:boolean;
    baseContext: IPropertyFieldPeoplePickerProps;
  }`

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

return {
  showLoadingIndicator:this.loadingIndicator,
  loadingIndicatorDelayTime: 1,
  pages: [
    {
      header: {
        description: strings.PropertyPaneDescription,
      },
      groups: [
        { 
          groupFields: [
            PropertyPaneTextField("titleText", {
              label: strings.Title,
              placeholder: strings.TitlePlaceholder
            }),
            PropertyPaneTextField("description", {
              label: strings.DescriptionFieldLabel,
              multiline:true,
              placeholder:strings.Description
            }),
            PropertyPaneTextField("checkboxLabel", {
              label: strings.CheckboxLabel,
              placeholder: strings.CheckboxPlaceholder
            }),
             PropertyPaneDropdown("siteCollection", {
              label: strings.SiteCollection,
              options: this.siteCollections,
              selectedKey: this.properties.siteName,
              disabled: this.loadingIndicator
            }),
            PropertyPaneDropdown("listName",{
              label: strings.ListFieldLabel,
              options: this.properties.fields,
              disabled: this.isFetched || this.loadingIndicator,
              selectedKey: this.properties.listName,
            }),
            PropertyFieldPeoplePicker('people',{
              label: 'Add people or group to list',
              initialData: this.properties.people,
              allowDuplicate: false,
              principalType: [PrincipalType.Users],
              onPropertyChange: this.onPropertyPaneFieldChanged,
              context: this.context,
              properties: this.properties,
              onGetErrorMessage: null,
              deferredValidationTime: 0,
              key: 'peopleFieldId'
            }),
            PropertyPaneButton("button",{
              onClick:null,
              text:"Save",
              buttonType: PropertyPaneButtonType.Primary
            })
          ],
        }
      ],
    }
  ],
};

}