Cannot read properties of undefined (reading 'User') to set PeoplePicker principalTypes

[yungfu]

Category

[ ] Enhancement

[ ] Bug

[x] Question

Version

Please specify what version of the library you are using: [ 3.7 & 3.8.0 ]

Expected / Desired Behavior / Question

 import {PeoplePicker, PrincipalType} from "@pnp/spfx-controls-react/lib/PeoplePicker";
 <PeoplePicker 
    context={props.spfxContext}
    titleText={'Select user'}
    ensureUser={true}
    principalTypes={[PrincipalType.User]}
    showHiddenInUI={false}
    resolveDelay={500}
/>

PeoplePicker always get

Uncaught TypeError: Cannot read properties of undefined (reading 'User')

But if I change the import statement to
import {PeoplePicker, PrincipalType} from "@pnp/spfx-controls-react/lib/controls/peoplepicker";
The PeoplePicker rendered successfully.

The spfx version is 1.14, the pnp/sp version is 3.4.1, I also installed "rush-stack-compiler-4.2"(This is required by pnpjs v3).
I am working on SharePoint Online with a mac mini.

I had make a similar demo with pnpjs v2 and rush-stack-compiler-3.9, the PeoplePicker worked well. But I cannot make sure this is caused by rush-stack-compiler.

So whether this is compatible with pnpjs v3, or I have missed something?

Thanks!

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[PeterWCox]

Thanks @yungfu - replacing the import statements worked for me.

[AJIXuMuK]

I've tested out with the latest SPFx (1.15) and PnPJS - all look good.
The sample is attached.
Could you share your sample?
people-picker-1.zip

[yungfu]

@AJIXuMuK - Add a ListPicker to webpart, and add import { ListPicker } from '@pnp/spfx-controls-react';.

<ListPicker
  context={props.spfxContext}  
/>
<PeoplePicker
    context={props.spfxContext}
    titleText={'Select people'}
    principalTypes={[PrincipalType.User]}
    ensureUser={true}
/>

In my project, I import ListPicker in another component file. They are all imported to one grandfather component. Finaly, I found that, any component that we can import { IconPicker or others } from '@pnp/spfx-controls-react'; directly will cause this issue.

[ekdegerman]

I get the same error when trying to upgrade to any version I tried <3.10.0 from my current 3.4.1 with both SPFx 1.14.0 and SPFx 1.15.2. Changing the import statement as mentioned by the op helps for me too. Unfortunately 3.10.0 has another issue, as described in #1292

[michaelmaillot]

Hi @yungfu,

Since you've raised the issue, do you still have trouble and if it does, did you have the chance to retry with recent versions (>=3.10)?

[yungfu]

I cannot reproduce this issue on 3.15. seems it has been fixed.