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 Apr 11 at 12:49
  • @KalpeshVaghela, yes, upn and email are identical. Added screenshot above.
    – Propool
    Apr 11 at 12:57
  • which version of SPFx you are using? Apr 11 at 13:32
  • I use spfx 1.15.2
    – Propool
    Apr 11 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.
    Apr 21 at 16:30

Your Answer

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

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