Prefer default export eslint error : <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>
