I know there are lots of questions out there related to React unable to find a component, but I have yet to find one that answers my issue.

Here ois my file structure:

In my PortfolioSmartCity.js file I am importing my SystemRadio component and using it:

import {
  Hero,
  Details,
  Counter,
  Gallery,
  Crumbs,
  SummaryVideo,
  Rules,
  MapImage,
  SystemRadio,
} from './components';

<Box>
  <Container>
    <SystemRadio />
  </Container>
</Box>

In my components/index.js file I am importing the component:

export { default as SystemRadio } from './SystemRadio';

And I get the error message:

On a side note, you can see the component working in the background of that screenshot.

No matter what I do I can’t get the SystemRadio component to work. All my other components are formatted 100% the exact same way.

And here’s the weird part. I rename the SystemRadio component to SystemRadio2 and everything works fine.

This happens often. I make a new component, import it, use it, and it doesn’t work. Rename everything, it works fine.

Maybe while I’m working on the component, and I’m half way done, it some how gets cached that it’s not there? Does React cache components? Is there a way to delete the cache?