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? Commented 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" }, Commented 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. Commented 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. Commented Oct 6, 2022 at 16:02
  • SPFx 1.12.1 supports react v16.9.0. Commented 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 you have read our privacy policy.

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