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

7
  • Which version of react and persona component library are you using? Are those compatible? 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" }, 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. 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. Oct 6, 2022 at 16:02
  • SPFx 1.12.1 supports react v16.9.0. Oct 6, 2022 at 16:12

1 Answer 1

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.

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.