How to get around airbnb eslint import/prefer-default-export rule when using index.js for exports

Question

For cases like this, /ACollectionOfTinyComponent/index.js

import Container from './Container';
export {
  Container,
};

So the index.js becomes a directory to include other small parts without having to write each Component Name out all the time. So in this case, we can import a component in another component like following:

import {Container} from './ACollectionOfTinyComponent'

//then use Container in the code here

Is this a bad practice? Since if I have airbnb linter enable then I got error linting of

Prefer default export import/prefer-default-export

it asks me to add default but that will cause compile error

Answer 1

it asks me to add default but that will cause compile error

You must be using the wrong syntax for exporting a default.

export { name1 as default, … };

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Syntax

import {Container} ... Is this a bad practice?

Yes. If you have a single entry point into a component (like a a class), you should export it as the default rather than a named export. The designers of the language gave default imports and exports a special syntax to promote it as the primary use case.

http://2ality.com/2014/09/es6-modules-final.html#default-exports-are-favored

Answer 2

I found out that because I added only ONE import & export for the index.js. But if I add more than one its fine! For example, if I do

import Container from './Container';
import Ezeewei from './Ezeewei';
export {
  Container,
  Ezeewei,
};

Note that I added one more import of Ezeewei.

Then the linting rule will pass!