Skip to content

Using deprecated properties on CIcon results in app crashing with react-scripts 5 #10

Open
@jcapogna

Description

@jcapogna

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions