SPFx Solutions throws error "minified React error #321"

$€®¥09@'s photo
$€®¥09@
·Oct 18, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

This time a short post. Some of my customers sent me the same error today. A solution that worked for months suddenly no longer works. The error message:

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 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)

minified React error #321

Apparently something has changed at Microsoft. Because nothing was changed on the customer side.

So I tried around a bit and then came across the reason. All the Fluent UI components produce the errors.

Solution / How to fix

For some reason an error occurs when importing from @microsoft/office-ui-fabric-react-bundle instead of office-ui-fabric-react.

So I replaced the following "import":

import { Icon, IconButton, PrimaryButton } from '@microsoft/office-ui-fabric-react-bundle';

like this

import { Icon, IconButton, PrimaryButton } from 'office-ui-fabric-react';

That's it. I hope this helps you

Update

After publishing my post, I was informed of the reason by a community member.

For Clarity, Microsoft updated their internal versions of React to React 17. 
They are working on a fix to allow usage of this 
office-ui-fabric-react-bundle without issue.

However, this is the correct fix if you don't have 
time to wait for Microsoft to remedy

Additionally, you can find more information in this Github issue:

Did you find this article valuable?

Support $€®¥09@ by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this