title: Prefer default export eslint error
body: <p>I am getting this eslint error:</p>
  
  <blockquote>
    <p>Prefer default export</p>
  </blockquote>
  
  <pre><code>import React, { Component } from 'react';
  
  class HomePage extends Component {
    render() {
      return (
        &lt;div className="Section"&gt;HomePage&lt;/div&gt;
      );
    }
  }
  
  export { HomePage };
  </code></pre>
  
  <p><strong>I have tried doing:</strong>
  <code>export { default as Homepage };</code> </p>
  
  <p>and then I get a fatal parsing error.</p>
  
  <p>Then I changed it to:</p>
  
  <pre><code>export default HomePage;
  </code></pre>
  
  <p>Which clears the eslint error.</p>
  
  <p>But then throws:</p>
  
  <blockquote>
    <p>'./HomePage' does not contain an export named 'HomePage'.</p>
  </blockquote>
  
  <p>Because I am calling HomePage like this:
  <code>import { HomePage } from './HomePage';</code></p>
  
  <p>If I remove the brackets then I get this error:</p>
  
  <blockquote>
    <p>"export 'default' (imported as 'HomePage') was not found in
    './HomePage'</p>
  </blockquote>
  
  <pre><code>import HomePage from './HomePage';
  &lt;PrivateRoute exact path="/" component={HomePage} /&gt;
  </code></pre>
  
  <p>What would be the proper way of changing this to the preferred default export?</p>