Issue with PeopleSearchService and @pnp/spfx-controls-react/lib/PeoplePicker

[RobertSiE]

Category

[ ] Enhancement

[ x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [3.18.0]

Expected / Desired Behavior / Question

After creating SPFx webpart (1.19.0) with PnP react controls and using PeoplePicker, the component does not work and I receive an error

Observed Behavior

It works without error on SPFx (1.17.2) and PnP react controls 3.16

Steps to Reproduce

create react spfx webpart and install latest (3.18) pnp controls react with people picker and try to use it

Thanks!

[github-actions[bot]]

Thank you for submitting your first issue to this project.

[aplaxas]

I met same issue on SPFx(1.19.0) with react controls(3.18.1) but working with controls(3.12.0) spfx 1.19.0 [email protected] fail bundle [email protected] success bundle, working [email protected] success bundle, working [email protected] success bundle, working [email protected] success bundle, working [email protected] fail

spfx 1.18.2 [email protected] success bundle, working [email protected] success bundle, working [email protected] success bundle, PeopleSearchService::searchTenant: error occured while fetching the users. [email protected] success bundle, PeopleSearchService::searchTenant: error occured while fetching the users.

[RobertSiE]

Hi @aplaxas, thanks downgrade to 3.12.0 works

[pcindywong]

Downgraded to 3.15.0 to fix the issue (using SPFx 1.19.0), but I need resultFilter feature that was introduced in 3.17.0 version.

Edit: I upgraded to 3.19.0 using SPFx 1.19.0 and fixed the issue with PeopleSearchService by adding webAbsoluteUrl prop e.g. webAbsoluteUrl={'https://xxx.sharepoint.com/sites/MySite/'}

[michaelmaillot]

Hello everyone,

Did you try with latest version (3.20.0)? The searchTenant function error should be resolved, since the REST API call is using the IPeoplePickerContext.absoluteUrl prop by default or the webAbsoluteUrl if filled.

[vofflan]

Hi, I have the same problem. Im using SPFx 1.16.1 and react controls 3.17.0 then it works fine. But when I upgrade to react controls 3.20 then peoplepicker stop working.

If I use webAbsoluteUrl then peoplepicker works but userphoto on peoplepicker doesnt work.

[michaelmaillot]

Can anyone put here a code sample with PeoplePicker properties filled, version of SPFx & PnP Controls used?

I tried to repro without being able to... Here's my context info:

• SPFx version: 1.20.0
• PnP Controls: 3.20.0
• Site URL: contoso.sharepoint.com/sites/Mark8ProjectTeam
• Page URL: sitePages/spfx-120.aspx

export default class Hellowp extends React.Component<IHellowpProps, IHellowpState> {
  // ...
  this._peoplePickerContext = {
        absoluteUrl: this.props.context.pageContext.web.absoluteUrl,
        msGraphClientFactory: this.props.context.msGraphClientFactory,
        spHttpClient: this.props.context.spHttpClient
      };
  // ...
  <PeoplePicker context={this._peoplePickerContext} titleText="People Picker" principalTypes={[PrincipalType.User]} personSelectionLimit={3} showtooltip ensureUser />
  // ...
}

[vofflan]

Hi @michaelmaillot, it works for me now. I have to change the way I get the context since PeoplePicker control needs an IPeoplePickerContext now. My code before were like:

context?: any; And then I get the context from ListViewCommandSetContext

Now I changed it the way you pick your context and then it works fine for me. I'm om SPFx version 1.16.1 and react controls 3.20.0

Thanks for helping me out on this one.

[michaelmaillot]

Glad to read that @vofflan 🙂

I'm closing this but will be notified if there's still trouble, feel free to open it again.

[kkazala]

I had the same error, tried to instantiate the peoplePickerContext but I have versions mismatch now.

• SPFx: 1.21.1
• @pnp/spfx-controls-react: 3.21.0
• @pnp/sp: 4.13.0
• node: 22.16.0

The code:

    const [peoplePickerContext, setPeoplePickerContext] = React.useState<IPeoplePickerContext>();
    React.useEffect(() => {
        setPeoplePickerContext({
            absoluteUrl: context.pageContext.web.absoluteUrl,
            msGraphClientFactory: context.msGraphClientFactory,
            spHttpClient: context.spHttpClient 
        })
     }, []);

where context is ListViewCommandSetContext, gives me errors.

Error 1: Type 'import("D:/.../common/temp/node_modules/.pnpm/@microsoft+sp-http-msgraph@_912d5b7497c2b0ad5b0cdff3f0becde0/node_modules/@microsoft/sp-http-msgraph/dist/index-internal").MSGraphClientFactory' is not assignable to type 'import("D:/.../common/temp/node_modules/.pnpm/@microsoft+sp-http-msgraph@_5cb9e70c24f5eaec6cda416874629623/node_modules/@microsoft/sp-http-msgraph/dist/index-internal").MSGraphClientFactory'. Types have separate declarations of a private property '_serviceScope'.

And indeed: @microsoft+sp-http-msgraph@_912d5b7497c2b0ad5b0cdff3f0becde0/node_modules/@microsoft/sp-http-msgraph: v1.21.1 @microsoft+sp-http-msgraph@_5cb9e70c24f5eaec6cda416874629623/node_modules/@microsoft/sp-http-msgraph: v1.20.0

Error 2: Type 'import("D:/../common/temp/node_modules/.pnpm/@[email protected]_f37730be62efc47ccb5fa559ea75c778/node_modules/@microsoft/sp-http-base/dist/index-internal").SPHttpClient' is not assignable to type 'import("D:/../common/temp/node_modules/.pnpm/@[email protected]_b8b030728c13e6015eab21768d47bb56/node_modules/@microsoft/sp-http-base/dist/index-internal").SPHttpClient'. Types have separate declarations of a private property '_digestCache'.

@[email protected]_f37730be62efc47ccb5fa559ea75c778/node_modules/@microsoft/sp-http-base: v1.21.1 @[email protected]_b8b030728c13e6015eab21768d47bb56/node_modules/@microsoft/sp-http-base: v1.20.0

The location "common/temp/..." is the central location where rush is installing libraries

I can of course start installing v1.20 of @microsoft/sp-http-msgraph and other dependencies, and try casting types, but it seems messy.

Any idea on how to approach it?

[michaelmaillot]

For now, the only solution that comes to my mind is to cast as any the context.msGraphClientFactory & the context.spHttpClient.

SPFx 1.21.1 will be supported in next release (3.22.0), for which we currently don't have any ETA.