PropertyFieldListPicker control failing with Cannot read properties of undefined (reading 'id')

[JesperGSimonsen]

Category

• [ ] Enhancement
• [X] Bug
• [ ] Question

Version

Please specify what version of the library you are using: [ "@pnp/spfx-property-controls": "3.17.0", ]

Expected / Desired Behavior / Question

To create a new solution, e.g like described in https://nanddeepnachanblogs.com/posts/2019-05-14-pnp-property-pane-controls-for-spfx/ and get the list picker function to work.

Observed Behavior

Following the steps from the above url or the ones from https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldListPicker/#implementation, VS Code gives two errors: In the inserted PropertyFieldListPicker in the getPropertyPaneConfiguration, context gives this error: Type 'WebPartContext' is not assignable to type 'BaseComponentContext'. Types have separate declarations of a private property '_serviceScope'.ts(2322) IPropertyFieldListPicker.d.ts(39, 5): The expected type comes from property 'context' which is declared here on type 'IPropertyFieldListPickerProps'

And onGetErrorMessage give this error: Type 'null' is not assignable to type '((value: string) => string | Promise) | undefined'.ts(2322) IPropertyFieldListPicker.d.ts(107, 5): The expected type comes from property 'onGetErrorMessage' which is declared here on type 'IPropertyFieldListPickerProps'

Changing context to context: this.context as any; and changing onGetErrorMessage to onGetErrorMessage: undefined: removes the erros and makes it possible to run a gulp serve

Trying to add the webpart gives an error: Something went wrong If the problem persists, contact the site administrator and give them the information in Technical Details. TECHNICAL DETAILS ERROR: Cannot read properties of undefined (reading 'id')

CALL STACK: TypeError: Cannot read properties of undefined (reading 'id') at https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_75d50594e595fa477e6cc5378ce44605.js:196:10988 at new Promise () at e.loadComponent (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_75d50594e595fa477e6cc5378ce44605.js:196:10956) at https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_75d50594e595fa477e6cc5378ce44605.js:196:13164 at async Promise.all (index 1)

Steps to Reproduce

Follow the steps to build a list picker as described in above urls, correct the context and the OnGetErrorMessage, run a gulp serve and add the web part.

Full code of ListPickerWebPart.ts: import { Version } from '@microsoft/sp-core-library'; import { type IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane'; import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; import type { IReadonlyTheme } from '@microsoft/sp-component-base'; import { escape } from '@microsoft/sp-lodash-subset'; import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker'; import styles from './ListPickerWebPart.module.scss'; import * as strings from 'ListPickerWebPartStrings';

export interface IListPickerWebPartProps { description: string; lists: string | string[]; // Stores the list ID(s)
}

export default class ListPickerWebPart extends BaseClientSideWebPart<IListPickerWebPartProps> {

private _isDarkTheme: boolean = false; private _environmentMessage: string = '';

public render(): void { this.domElement.innerHTML = <section class="${styles.listPicker} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}"> <div class="${styles.welcome}"> <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" /> <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2> <div>${this._environmentMessage}</div> <div>Web part property value: <strong>${escape(this.properties.description)}</strong></div> </div> <div> <h3>Welcome to SharePoint Framework!</h3> <p> The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling. </p> <h4>Learn more about SPFx development:</h4> <ul class="${styles.links}"> <li><a href="https://aka.ms/spfx" target="_blank">SharePoint Framework Overview</a></li> <li><a href="https://aka.ms/spfx-yeoman-graph" target="_blank">Use Microsoft Graph in your solution</a></li> <li><a href="https://aka.ms/spfx-yeoman-teams" target="_blank">Build for Microsoft Teams using SharePoint Framework</a></li> <li><a href="https://aka.ms/spfx-yeoman-viva" target="_blank">Build for Microsoft Viva Connections using SharePoint Framework</a></li> <li><a href="https://aka.ms/spfx-yeoman-store" target="_blank">Publish SharePoint Framework applications to the marketplace</a></li> <li><a href="https://aka.ms/spfx-yeoman-api" target="_blank">SharePoint Framework API reference</a></li> <li><a href="https://aka.ms/m365pnp" target="_blank">Microsoft 365 Developer Community</a></li> </ul> </div> </section>; }

protected onInit(): Promise { return this._getEnvironmentMessage().then(message => { this._environmentMessage = message; }); }

private _getEnvironmentMessage(): Promise { if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook return this.context.sdks.microsoftTeams.teamsJs.app.getContext() .then(context => { let environmentMessage: string = ''; switch (context.app.host.name) { case 'Office': // running in Office environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment; break; case 'Outlook': // running in Outlook environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment; break; case 'Teams': // running in Teams case 'TeamsModern': environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment; break; default: environmentMessage = strings.UnknownEnvironment; }

      return environmentMessage;
    });
}

return Promise.resolve(this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment);

}

protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void { if (!currentTheme) { return; }

this._isDarkTheme = !!currentTheme.isInverted;
const {
  semanticColors
} = currentTheme;

if (semanticColors) {
  this.domElement.style.setProperty('--bodyText', semanticColors.bodyText || null);
  this.domElement.style.setProperty('--link', semanticColors.link || null);
  this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered || null);
}

}

protected get dataVersion(): Version { return Version.parse('1.0'); }

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { return { pages: [ { header: { description: strings.PropertyPaneDescription }, groups: [ { groupName: strings.BasicGroupName, groupFields: [ PropertyPaneTextField('description', { label: strings.DescriptionFieldLabel }),
PropertyFieldListPicker('lists', {
label: 'Select a list',
selectedList: this.properties.lists,
includeHidden: false,
orderBy: PropertyFieldListPickerOrderBy.Title,
disabled: false,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
context: this.context as any,
onGetErrorMessage: undefined,
deferredValidationTime: 0,
key: 'listPickerFieldId' }) ] } ] } ] }; } }

[Panoone]

I'm getting the same error with all the webparts I've tried adding - list, peoplepicker etc.

Using v3.17.1 Build tools version: 3.18.1 Node version: v20.12.1

[marcdrexel]

had the same issue, happend with every control & with different combinations so SPfx and @pnp/spfx-property-controls versions in the end i could solve it for SPfx v1.19.0 with @pnp/spfx-property-controls 3.18.0.

all i had to do was

1. add the following dependencies to package.json

    "react": "17.0.1",
    "react-ace": "10.1.0",
    "react-dom": "17.0.1",

2. add these devDependencies

    "@types/react": "17.0.45",
    "@types/react-addons-shallow-compare": "0.14.22",
    "@types/react-addons-test-utils": "15.6.0",
    "@types/react-addons-update": "0.14.14",
    "@types/react-dom": "17.0.17",

3. change existing devDepndencies "@fluentui/react": "^8.106.4" to "@fluentui/react": "8.106.4",

4. delete package-lock.json

5. delete node_modules folder

6. run "npm install"

for people using an older version then 3.18.0 please check the package.json for the correct react version to use eg. https://github.com/pnp/sp-dev-fx-property-controls/blob/v3.18.0/package.json https://github.com/pnp/sp-dev-fx-property-controls/blob/v3.17.0/package.json etc