React Component ESLint says Prefer Default Export

Question

I keep getting this error from ESLint on my component.

ESLint: says Prefer Default Export (import/prefer-default-export)

Here's is how the component looks

export class mycomponent extends React.Component {

  render() {

    //stuff here

  }
}

What is it asking for? How can I fix this?

Answer 1

you need to specify your export as default like this:

export default class mycomponent extends React.Component {

  render() {

    //stuff here

  }
}

(notice the added word default ) and then in other files you may import your component with:

import mycomponent from './mycomponent.js';

assuming that the component is being included from within the same directory and is defined in the file mycomponent.js.

You can also avoid having a default export if your file contains multiple exported things with names such as:

export const foo = 'foo';
export const bar = 'bar';

or you could even leave your original file exactly as it is without the word default and import it using a batch import:

import * as mycomponent from './mycomponent.js';