Description
I have an app that I've been upgrading from older versions of CoreUI.
I have the following usage of CIcon using the deprecated name property.
<CIcon size="lg" name="cis-warning"/>
This was working fine with react-scripts 4, but started breaking my app when I upgraded to react-scripts 5. The React app failed to render and this error was in the console:
Uncaught ReferenceError: process is not defined
at index.es.js:1266:1
at renderWithHooks (react-dom.development.js:12980:1)
at updateForwardRef (react-dom.development.js:14813:1)
at beginWork (react-dom.development.js:16553:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3555:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3599:1)
at invokeGuardedCallback (react-dom.development.js:3654:1)
at beginWork$1 (react-dom.development.js:20655:1)
at performUnitOfWork (react-dom.development.js:19666:1)
at workLoopSync (react-dom.development.js:19611:1)
(anonymous) @ index.es.js:1266
...
react_devtools_backend.js:2655 The above error occurred in the <CIcon> component:
Reading through the code in CIcon.tsx, I think using the deprecated properties name
and content
causes this error since the code for the deprecated warning access process
:
if (name) {
process &&
process.env &&
process.env.NODE_ENV === 'development' &&
console.warn(
'[CIcon] The `name` property is deprecated and will be removed in v3, please use `icon="..."` instead of.',
)
}
I'm not really sure how process
works, but this was only an issue after upgrading to react-scripts 5. Not using the deprecated properties fixes it, but it seems incorrect to me that a deprecated property would crash the app, when it appears the intent is to log a warning.