LivePersona control doesn't work

Question

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.

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

<LivePersona 
    upn={person.email}
    template={
        <>
            <Persona imageUrl={this.state.photo} text={`${person.firstName} ${person.lastName}`} 
                secondaryText={person.jobTitle} coinSize={64} />
        </>
    }
    serviceScope={this.context.serviceScope}
/>

Tell me what could be wrong?

upn and email are identical.

Packages:

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

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

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