export default' on webstorm 2017.2.5 for React App + JSX

Question

/*Greetings to all; I would like some help as regards an issue i am having with the 'export default' module on Webstorm when building react apps.

Background to recreate issue: After going through the steps to create a React app: [1]: npm install -g create-react-app [2]: create-react-app hello_world [3]: cd hello_world [4] npm start

//Everything works fine. */ - Open the project Folder in Webstorm 2017.2.5 - Navigate to the src folder and open the App.js file - Observe the last line of code: 'export default App' //All is active and working. Implies, JSX syntax is enabled in ES6. - create a new JS file inside the same src folder and fill in with the following (just something quick to test. classNames used are just for demo):

1   import React, { Component } from 'react';
2   import logo from './logo.svg';
3   import './App.css';

4    class Output extends Component {
5        render() {
6            return (
7                <div className="output">
8                    <header className="output-header">
9                        <img src={logo} className="output-logo" alt="logo" />
10                           <h3 className="output-title">Welcome to React</h3>
11                    </header>
12                    <p className="output-intro">
13                        To get started, edit <code>src/Output.js</code> and 
                          save to reload.
14                    </p>
15                </div>
16            );
17        }
18    }
19    export default Output; // this is where I am having the challenge. 
  Webstorms error highlighting says: 'Unused default export'

• I tried to import the Output.js file into the App.js file via: import Output from './Output'; //yet the problem persists.

• I also tried doing the same with another Editor (Atom), and it worked perfectly. problem was solved.

• After looking up this issue, I came across something similar [here][1] but no solution.

How can I resolve this issue on Webstorm?