I did everything according to the pnp documentation (https://pnp.github.io/sp-dev-fx-controls-react/controls/LivePersona/#livepersona-control), but the LivePersona control does not work for me. Photo and name is displaying, but when hovering and clicking, the information card is not displayed.

LivePersona items

import { LivePersona } from "@pnp/spfx-controls-react/lib/LivePersona";

            <Persona imageUrl={this.state.photo} text={`${person.firstName} ${person.lastName}`} 
                secondaryText={person.jobTitle} coinSize={64} />

Tell me what could be wrong?

upn and email are identical. enter image description here


"@pnp/spfx-controls-react": "3.13.0",

"@pnp/spfx-property-controls": "3.11.0"

  • Can you make sure that you are passing correct upn? because in some scenario upn and email can be different Commented Apr 11, 2023 at 12:49
  • @KalpeshVaghela, yes, upn and email are identical. Added screenshot above.
    – Propool
    Commented Apr 11, 2023 at 12:57
  • which version of SPFx you are using? Commented Apr 11, 2023 at 13:32
  • I use spfx 1.15.2
    – Propool
    Commented Apr 11, 2023 at 13:38

1 Answer 1


I have the same issue.

If i hover the native coin before, the LivePersona works.

Looks like LivePersona did not initialize the control

Config :

  • "@pnp/spfx-controls-react": "^3.14.0",
  • "@pnp/spfx-property-controls": "^3.12.0",
  • "office-ui-fabric-react": "^7.204.0",
  • SPFX : 1.15.2
  • This is the question similar to "I am having same issue".
    – Pradip R.
    Commented Apr 21, 2023 at 16:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.