| 1 | # import/no-named-as-default-member
|
|---|
| 2 |
|
|---|
| 3 | ⚠️ This rule _warns_ in the following configs: ☑️ `recommended`, 🚸 `warnings`.
|
|---|
| 4 |
|
|---|
| 5 | <!-- end auto-generated rule header -->
|
|---|
| 6 |
|
|---|
| 7 | Reports use of an exported name as a property on the default export.
|
|---|
| 8 |
|
|---|
| 9 | Rationale: Accessing a property that has a name that is shared by an exported
|
|---|
| 10 | name from the same module is likely to be a mistake.
|
|---|
| 11 |
|
|---|
| 12 | Named import syntax looks very similar to destructuring assignment. It's easy to
|
|---|
| 13 | make the (incorrect) assumption that named exports are also accessible as
|
|---|
| 14 | properties of the default export.
|
|---|
| 15 |
|
|---|
| 16 | Furthermore, [in Babel 5 this is actually how things worked][blog]. This was
|
|---|
| 17 | fixed in Babel 6. Before upgrading an existing codebase to Babel 6, it can be
|
|---|
| 18 | useful to run this lint rule.
|
|---|
| 19 |
|
|---|
| 20 | [blog]: https://kentcdodds.com/blog/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution
|
|---|
| 21 |
|
|---|
| 22 | ## Rule Details
|
|---|
| 23 |
|
|---|
| 24 | Given:
|
|---|
| 25 |
|
|---|
| 26 | ```js
|
|---|
| 27 | // foo.js
|
|---|
| 28 | export default 'foo';
|
|---|
| 29 | export const bar = 'baz';
|
|---|
| 30 | ```
|
|---|
| 31 |
|
|---|
| 32 | ...this would be valid:
|
|---|
| 33 |
|
|---|
| 34 | ```js
|
|---|
| 35 | import foo, {bar} from './foo.js';
|
|---|
| 36 | ```
|
|---|
| 37 |
|
|---|
| 38 | ...and the following would be reported:
|
|---|
| 39 |
|
|---|
| 40 | ```js
|
|---|
| 41 | // Caution: `foo` also has a named export `bar`.
|
|---|
| 42 | // Check if you meant to write `import {bar} from './foo.js'` instead.
|
|---|
| 43 | import foo from './foo.js';
|
|---|
| 44 | const bar = foo.bar;
|
|---|
| 45 | ```
|
|---|
| 46 |
|
|---|
| 47 | ```js
|
|---|
| 48 | // Caution: `foo` also has a named export `bar`.
|
|---|
| 49 | // Check if you meant to write `import {bar} from './foo.js'` instead.
|
|---|
| 50 | import foo from './foo.js';
|
|---|
| 51 | const {bar} = foo;
|
|---|
| 52 | ```
|
|---|