---
title: "import/no-named-as-default"
description: "Disallow naming a default import after a named export of the same module"
# Generated by src/codegen/lint-rule-docs.ts. Do not edit below this line.
plugin: "import"
aliases: ["import-x/no-named-as-default"]
kind: "problem"
category: "suspicious"
default: "off"
fixable: "no"
typeAware: false
deprecated: false
---

`import Button from "./button"` gets the default export, whatever you call it. If `./button` also has a named export `Button`, you probably forgot the braces, and the code is using a different value than the name suggests.

The rule reads the imported module. It only reports if that module has both a default export and a named export with the name you chose.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"import/no-named-as-default" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* file "button.js" */}
```js button.js
export const Button = props => render("button", props);

export default withTheme(Button);
```

{/* bad */}
```js
import Button from "./button";
```

Not reported:

{/* file "button.js" */}
```js button.js
export const Button = props => render("button", props);

export default withTheme(Button);
```

{/* good */}
```js
import ThemedButton, { Button } from "./button";
```

## When not to use it

Some modules export the same value both ways on purpose, so that `import Button` and `import { Button }` both work. The rule still reports the first form there.