Export default unused in WebStorm

Question

I am using loadable in React to load my component dynamically. So I'm exporting the index of each component and import them in app.js. But the issue is I am still getting an error in WebStorm that the export default is unused in individual component index file.

Here is my code. This is in my App.js file.

const HomeIndex = Loadable({
loader: () => import('./components/home/Index'),
loading: () => <div> </div>,
 });

My component index file.

export default class HomeIndex extends React.Component {

fetchCounts = () =>{
    this.counts.fetchCounts();
};

render(){
    return(
        <div className="pageView">
            <Counts ref={refs => { this.counts = refs; }}/>
            <hr/>
            <Customers fetchCounts={this.fetchCounts}/>
        </div>
    )
  }
}

Screenshot of error in WebStorm:

Answer 1

Logged as WEB-37294, please vote for it to be notified when it's fixed

Answer 2

You can suppress this just for the file by placing the following line at the top of the file:

// noinspection JSUnusedGlobalSymbols

Answer 3

You can disable this inspection in webstorm by going to Preferences > Editor > Inspections > Unused symbols and unchecking Unused global symbol