Answer a question

I am getting this eslint error:

Prefer default export

import React, { Component } from 'react';

class HomePage extends Component {
  render() {
    return (
      <div className="Section">HomePage</div>
    );
  }
}

export { HomePage };

I have tried doing: export { default as Homepage };

and then I get a fatal parsing error.

Then I changed it to:

export default HomePage;

Which clears the eslint error.

But then throws:

'./HomePage' does not contain an export named 'HomePage'.

Because I am calling HomePage like this: import { HomePage } from './HomePage';

If I remove the brackets then I get this error:

"export 'default' (imported as 'HomePage') was not found in './HomePage'

import HomePage from './HomePage';
<PrivateRoute exact path="/" component={HomePage} />

What would be the proper way of changing this to the preferred default export?

Answers

From eslint-plugin-import

When there is only a single export from a module, prefer using default export over named export.

class HomePage extends Component {
  //....
}

export default HomePage

In another file :

import HomePage from './Hello';

Check here codesandbox