Intellij WebStorm showing useless usage search on encapsulated React components (using HOC)

It is basically this issue.

While using code like

class SomeComponent extends React.Component {

}

export default withRouter(SomeComponent);

I can’t use search usages properly, because it obviously finds the export line.

It can be hacked in functional components like this:

const SomeComponent = withRouter((props) => {
   //...component here
});
export default SomeComponent;

but gets very ugly when using redux for example:

const mapStateToProps = (state, ownProps) => ({
    ....
});

const SomeComponent = connect(mapStateToProps)({
    cartPhotos,
    digitals,
    balancePrice,
    photolabPrice,
    digitalsPrice,
    voucher,
    photosPrice,
    deliveryPrice,
    totalPrice,
    openPhotolabModal,
    isSidebar,
}) => {

});
export default SomeComponent;

My questions are:

• Is there a way to overcome this without using such ugly approach?
• Is there a way to overcome this on a class component AT ALL?

Answer

It’s normal that you find only one ref for SomeComponent.

SomeComponent !== your default export

If you press right click on default and search there usages you find all that use it in import.