Spfx PNP people picker error for context

Question

I am working on solution where inside homewebpart there are many components (tsx files) in one of my PP.tsx file want to create PNP people picker control I added context:any in my PPProps.ts and inside my PP.tsx added people picker control in people picker I used this.props.context for context but when load webpart in page it throws error cannot get property context of undefined

Context:this.context is defined in basecomponenet in homewebpart.ts

Answer 1

I have the same issue aswell. But a workaround that have worked before is

    <PeoplePicker
        context={this.props.wpContext as any}
        titleText="People Picker"
      />

I have been using this workaround for some months, but now two more errors have appeard but i dont know if they are releated

1. principalTypes={[PrincipalType.User]}

PrincipalType.User is undefined

2. principalTypes={[1]}`

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Answer 2

I had the same problem, I solved it by changing the import.

Before:

import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react/lib/PeoplePicker';

Now:

import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react/lib/controls/peoplepicker';