ESLint Prefer default export import/prefer-default-export

Question

Hi there I am struggling to understand / have this eslint error disappear with my React Project.

Prefer default export import/prefer-default-export

Helpers.js error is pointing to:

export function getItems() {   fetch('./data/data_arr.js')   .then(results => results.json())   .then(results => this.setState({ items: results })); } 

import of function:

import { getItems } from '../helpers/helpers';

componentDidMount() {     getItems.call(this); } 

I have tried to no avail:

"rules": {      "import/prefer-default-export": off,      ... } 

Do I need to add "default" to the function? export default function getItems() {...}

Thank you

Answer 1

"rules": {      "import/prefer-default-export": "off",      ... } 

The word off has to be quoted.

Answer 2

To turn this warning off, you can add the comment

/* eslint-disable import/prefer-default-export */ 

to the very top of the file where you are exporting getItems.

Note, Eslint is just giving you a style warning here - there's nothing "wrong" with your code, especially if you intend to export more functions from this same file in future.

Background

In case it's useful, here's the difference between export default and export:

Using export default

In this example, the file myFile.js is only exporting one bit of code; a function called myFunction.

// myFile.js  function myFunction() {     // do something }  export default myFunction;  

When you import something that was a export default, you can call it whatever you like. So you can call it the same name, like this:

// someOtherFile.js  import myFunction from './myFunction';  // ... now you can use myFunction by calling myFunction() 

... or you can call it something else

// someOtherFile.js  import someDifferentName from './myFunction';  // ... now you can use myFunction by calling someDifferentName() 

It is often best to use export default when you are only exporting one bit of code from a file. Each file can only have one default export. There is some debate about it helping with treeshaking, but this won't really matter. In practice, it's just a nicer syntax when you import the code into another file.

Using export on its own

If you want to export multiple bits of code from a file (or plan to in future), you'll use export on its own. This is sometimes referred to "named exporting" because you have to use the same name when you import. For example:

// myFile.js  function myFunction() {     // do something }  const someVariable = "Hello World"  export {      myFunction,      someVariable,     // plus as many others as you like     };  

Now when you import a named export, you have to use the same name, and use a destructuring syntax:

// someOtherFile.js  import { myFunction } from './myFunction';  // ... now you can use myFunction by calling myFunction() 

You can import multiple things:

// someOtherFile.js  import { myFunction, someVariable } from './myFunction';  // ... now you can use myFunction by calling myFunction() // ... now you can use someVariable as someVariable 

Sometimes you might need to use a different name when importing. This can happen if you have two named exports (from two different files), with the same name. In this case, you can use an alias for the named export:

// someOtherFile.js  import { myFunction as someDifferentName } from './myFunction';  // ... now you can use myFunction by calling someDifferentName()