SPFx sudden Minified React error #321

[wizneeraj]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version v100
• SPFx version 1.12
• Node.js version 10

Describe the bug / error

One of our SPFx Web Part started throwing the below error suddenly on all the pages its being used. It was working until yesterday and no changes have been made to the package recently in last 2 months.

ERROR: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

CALL STACK: Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Object.ao (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_en-us_ea3e1b4c1c4e9e32890807c4b77664b2.js:69:64371) at Object.t.useRef (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_en-us_ea3e1b4c1c4e9e32890807c4b77664b2.js:3:6809) at https://res-1.cdn.office.net/files/sp-client/office-ui-fabric-react-bundle_none_441bf6f5d0719b2d3d2a.js:1:40124 at Yr (https://res-1.cdn.office.net/files/sp-client/react-dom-16-bundle_none_8eaea77e9a62cc734837.js:2:64000) at To (https://res-1.cdn.office.net/files/sp-client/react-dom-16-bundle_none_8eaea77e9a62cc734837.js:2:71934) at ys (https://res-1.cdn.office.net/files/sp-client/react-dom-16-bundle_none_8eaea77e9a62cc734837.js:2:112131) at pc (https://res-1.cdn.office.net/files/sp-client/react-dom-16-bundle_none_8eaea77e9a62cc734837.js:2:102665) at uc (https://res-1.cdn.office.net/files/sp-client/react-dom-16-bundle_none_8eaea77e9a62cc734837.js:2:102590) at ac (https://res-1.cdn.office.net/files/sp-client/react-dom-16-bundle_none_8eaea77e9a62cc734837.js:2:99620) at Zs (https://res-1.cdn.office.net/files/sp-client/react-dom-16-bundle_none_8eaea77e9a62cc734837.js:2:96388)

Steps to reproduce

N/A

Expected behavior

WebPart should render as designed

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

@wizneeraj - could you please check the comments from the issues under "react17" label to check if any is applicable to you (both closed and open): https://github.com/SharePoint/sp-dev-docs/labels/react-17

[wizneeraj]

@AJIXuMuK - Seems like we had an import of a control from '@microsoft/office-ui-fabric-react-bundle' which is causing the issue. Was there any recent changes made, in the other issue it was mentioned there was fix that was rolled out. What was it about ?

[AJIXuMuK]

@wizneeraj - the fix is intended to allow the usage of office-ui-fabric-react-bundle without problems. But if you've just got the error, I assume there is something else on the plate. What version of React are you using in your solution?

[wizneeraj]

We are using react 16.9.0. BTW, changing that import statement fixed the issue in our tenant as well.

[bcameron1231]

@AJIXuMuK Was this rolled out globally, or in the process still? I'm still seeing this issue when I have references to office-ui-fabric-react in css or imports

[DeloDev]

I am also seeing this in my environment. After removing all references to @microsoft/office-ui-fabric-react-bundle and switching to office-ui-fabric-react, web parts are rendering as expected. (First observed at 4:00 MT - 10/17/2022)

[foxxycodes]

Several customer projects started to break! This is bad!

[AJIXuMuK]

We found one more issue and will be including it in the next rolled out build. We will not roll back the current build. So, if the issue is critical for you - replace the import to office-ui-fabric-react. I recommend doing it anyway as @microsoft/office-ui-fabric-react-bundle will be deprecated in the next beta of SPFx.

[gavrielsl]

@AJIXuMuK thanks, works for me.

[AtDH01]

We found one more issue and will be including it in the next rolled out build. We will not roll back the current build. So, if the issue is critical for you - replace the import to office-ui-fabric-react. I recommend doing it anyway as @microsoft/office-ui-fabric-react-bundle will be deprecated in the next beta of SPFx.

Thanks for the suggested fix...

Pretty frustrating that this broke our components that we had in our production environment.

[andreer1]

This happened to us too. The solution from AJIXuMuK works fine

[WardWilmsen]

Also had this issue today with a few customers running SPFx webparts in production... Thx for the suggested fix though.

[FangQL]

We found one more issue and will be including it in the next rolled out build. We will not roll back the current build. So, if the issue is critical for you - replace the import to office-ui-fabric-react. I recommend doing it anyway as @microsoft/office-ui-fabric-react-bundle will be deprecated in the next beta of SPFx.

@AJIXuMuK Do we have public announcement for the deprecated? Thanks.

[AJIXuMuK]

@FangQL - we will have the official announcement as part of the beta release notes

[AJIXuMuK]

the fix has been rolled out to 100% prod.

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues