• I've compiled versions of this code many times over the past few years.

• It also runs fine in development mode, it just won't compile to staging (or production).

• VS Code isn't reporting any errors or warnings

The word "Icons" (case-sensitive) is not anywhere in my code-base. I did name an object that, but I renamed it to SiteIcons. It was telling me that Icons was undefined, when it clearly shouldn't have been.

But when I run react-app-rewired build --config-overrides=./config-overrides.js, (file and command are unchanged from last several compiles), I get dozens of errors throughout the project like this,

Line 115:42:  'Icons' is not defined  react/jsx-no-undef

and some other calls to Material Icons that I've now moved to this object

Line 298:141:  'ReceiptLongRounded' is not defined  react/jsx-no-undef
Line 330:52:   'PasswordRounded' is not defined    react/jsx-no-undef

But when i follow to a linked file to any of these reports

src\views\_widgets\short-form.tsx
  Line 194:56:  'ErrorTwoTone' is not defined  react/jsx-no-undef

I see that the code at that line actually says, as it's supposed to

<SiteIcons.ErrorTwoTone />

I've tried clearing the npm cache, the babel cache, and restarting the machine

• I've compiled versions of this code many times over the past few years.

• It also runs fine in development mode, it just won't compile to staging (or production).

• VS Code isn't reporting any errors or warnings

The word "Icons" (case-sensitive) is not anywhere in my code-base. I did name an object that, but I renamed it to SiteIcons. It was telling me that Icons was undefined, when it clearly shouldn't have been.

But when I run react-app-rewired build --config-overrides=./config-overrides.js, (file and command are unchanged from last several compiles), I get dozens of errors throughout the project like this,

Line 115:42:  'Icons' is not defined  react/jsx-no-undef

and some other calls to Material Icons that I've now moved to this object

Line 298:141:  'ReceiptLongRounded' is not defined  react/jsx-no-undef
Line 330:52:   'PasswordRounded' is not defined    react/jsx-no-undef

But when i follow to a linked file to any of these reports

src\views\_widgets\short-form.tsx
  Line 194:56:  'ErrorTwoTone' is not defined  react/jsx-no-undef

I see that the code at that line actually says, as it's supposed to

<SiteIcons.ErrorTwoTone />

I've tried clearing the npm cache, the babel cache, and restarting the machine

• create-react-app
• react-app-rewired

1 Answer 1

I was able to solve this weird cache issue by effectively touching each file.

Honestly, I just ran a project-wide replace of ^import SiteIcons with $0 in VSCode.

After this, the project compiled fine, no more mysterious undef issues.