ESLint Prefer default export import/prefer-default-export

# Table of Contents

# ESLint Prefer default export import/prefer-default-export

The ESLint "Prefer default export import/prefer-default-export" warning is shown when you have a file that only contains a single export and use a named export instead of a default one.

To resolve the issue, disable the ESLint rule or use a default export.

Here is an example of when the warning is shown.

index.js

Copied!
// ⛔️ Prefer default export  import/prefer-default-export
export function greet(fullName) {
  return `hello ${fullName}`;
}

The file only contains a single export and uses a named export instead of a default one.

One way to resolve the issue is to use a default export.

index.js

Copied!
// ✅ No warnings
export default function greet(fullName) {
  return `hello ${fullName}`;
}

Then you would import the function without curly braces.

another-file.js

Copied!
import greet from './index.js'

console.log(greet('bobby hadz'))

If you are exporting a const declaration as default, make sure to declare it one line and export it on the next.

index.js

Copied!
const site = 'bobbyhadz.com';

export default site;

Then you would import the default export as follows.

another-file.js

Copied!
import site from './index.js'

console.log(site);

You can read more about using the ES6 modules import/export syntax in this article.

In short, the main differences between a default and a named export are:

there can only be a maximum of 1 default export per file.
there can be as many named exports in a file as necessary.
default exports are imported without curly braces.
named exports are imported with curly braces.
when importing a default export, you can use a different name.
your IDE is usually able to give you better autocompletion when using named exports and imports.

However, in some cases, you might want to disable the ESLint rule and use named exports.

# Disabling the `import/prefer-default-export` rule globally

You can edit your .eslintrc.js file if you want to disable the import/prefer-default-export rule globally.

.eslintrc.js

Copied!
module.exports = {
    rules: {
        'import/prefer-default-export': 'off',
    },
};

disable prefer default export rule globally

If you write your ESLint config using JSON, you have to edit your .eslintrc or .eslintrc.json file.

.eslintrc.json

Copied!
{
  "rules": {
     "import/prefer-default-export": "off"
  }
}

Make sure to double-quote the keys and values and remove the trailing comma after the last property in the rules object.

# Disabling the `import/prefer-default-export` rule for a single line

You can use a comment if you only want to disable the import/prefer-default-export rule for a single line.

index.js

Copied!
// eslint-disable-next-line import/prefer-default-export
export const site = 'bobbyhadz.com';

Make sure the comment is placed above the line that causes the warning.

# Disabling the `import/prefer-default-export` rule for an entire file

If you want to disable the import/prefer-default-export rule for an entire file, add the following comment at the top of your file.

index.js

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

export const site = 'bobbyhadz.com';

Make sure the comment is added at the top of the file in which the warning is raised or at least above the named export.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

ESLint Prefer default export import/prefer-default-export

# Table of Contents