SPFx Solutions throws error "minified React error #321"
Play this article
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)
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: