0

I have a SPfx web part that uses the Persona component. That component just started failing on SharePoint Online in the last day or two. It still works in my localhost workbench, but fails on SharePoint Online. Removing the persona component fixes the error.

I only get the minified error in the console. https://reactjs.org/docs/error-decoder.html?invariant=321

Improve this question
7
  • Which version of react and persona component library are you using? Are those compatible?
    – Ganesh Sanap - MVP
    Oct 6, 2022 at 15:43
  • "dependencies": { "@microsoft/sp-core-library": "1.12.1", "@microsoft/sp-lodash-subset": "1.12.1", "@microsoft/sp-office-ui-fabric-core": "1.12.1", "@microsoft/sp-property-pane": "1.12.1", "@microsoft/sp-webpart-base": "1.12.1", "office-ui-fabric-react": "7.156.0", "react": "16.9.0", "react-dom": "16.9.0" },
    – Randy Slavey
    Oct 6, 2022 at 15:52
  • This is code that has been working for over a year. I assume SharePoint online changed a version of something over the past two days, but I can't find any announcements.
    – Randy Slavey
    Oct 6, 2022 at 15:53
  • I changed office-ui-fabric-react from 7.156.0 to 6.214.1 (the version referenced at learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/…. Did not resolve the issue.
    – Randy Slavey
    Oct 6, 2022 at 16:02
  • SPFx 1.12.1 supports react v16.9.0.
    – Ganesh Sanap - MVP
    Oct 6, 2022 at 16:12

1 Answer 1

Reset to default
0

I was able to resolve it by using the Persona component from "office-ui-fabric-react" instead of "@microsoft/office-ui-fabric-react-bundle".

Previous code:

import {
    Persona,
    IPersonaStyles,
    PersonaSize,
    IPersonaProps,
    PersonaInitialsColor,
} from "@microsoft/office-ui-fabric-react-bundle";

Updated code:

import {
    Persona,
    IPersonaStyles,
    PersonaSize,
    IPersonaProps,
    PersonaInitialsColor,
} from "office-ui-fabric-react";

For whatever reason, the bundle does not work on SharePoint Online.

Improve this answer

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.