How do I resolve eslint import/no-named-as-default

Question

After looking at the documentation for the import/no-named-as-default eslint rule, I'm still confused about what exactly I'm doing wrong.

I have the following file structure

.
├── ButtonBack.css
├── ButtonBack.jsx
├── __tests__
│   └── ButtonBack.test.jsx
└── index.js

The ButtonBack.jsx contains the following code

import React from 'react';
import PropTypes from 'prop-types';

export default class ButtonBack extends React.Component {
  ... code removed to keep example short ...
}

__tests__/ButtonBack.test.jsx contains the following code

import React from 'react';
import { shallow } from 'enzyme';
import ButtonBack from '../ButtonBack'; // <== this line has an eslint warning

... code removed to keep example short ...

The problem is, my linter says that import ButtonBack from '../ButtonBack violates the following lint rules:

• import/no-named-as-default
• import/no-named-as-default-member

I can't figure out why my import statement violates the lint rule. Removing the name of the class in ButtonBack.jsx (export default class extends React.Component) does not solve the issue either.

Answer 1

Ran into this same issue and from what I'm seeing you're going to just have to disable that rule (that's what I did at least)

"Unfortunately, React + Redux is the most common scenario. However, there are lots of other cases where HOCs will force developers to shut down this rule."

https://github.com/benmosher/eslint-plugin-import/issues/544

https://github.com/reactjs/react-redux/issues/119

https://github.com/18F/calc/pull/1235

.eslintrc

"rules": {
    "import/no-named-as-default": 0
}

Answer 2

Ran into this issue because I am using React + Redux:

export class ButtonBack extends React.Component {
  // code removed
}
export default connect(null, null)(ButtonBack);

So with the code above this import will give me a warning:

import ButtonBack from ./ButtonBack;

changing to the following fixes the problem:

import ConnectedButtonBack from ./ButtonBack;

Not exporting class ButtonBack would also fix the problem, but I like to export it to help with testing.

---

UPDATE 2019

My preferred solution for this issue is to have separate files for components and container. I think this keeps files smaller and easier to understand. In this case I would have two files:

components/ButtonBack.js
containers/ButtonBackContainer.js

---

UPDATE 2020

The no-named-as-default eslint rule is meant to help you in case you mistakenly import a default export when you meant to import a named export.

I haven't ran into this issue for a while now because:

• I avoid default exports when I can, as I think they can lead to mild confusion.
• I don't use the connect function anymore, I use the useSelector hook instead.
• I usually test the component together with the redux store. Here is an example on how to do that using React Testing Library.

Answer 3

Original problem line :

import ButtonBack from '../ButtonBack'; 

Fixed Line:

import { ButtonBack } from '../ButtonBack'; 

Answer 4

I had the same issue when I imported class components and it was such a simple solution in the end.

Solution

Just add

"parser": "babel-eslint"

to your eslintrc config file after you installed this package with

npm install babel-eslint --save-dev

or

yarn add babel-eslint --dev

Explanation

babel-eslint tells eslint to use the configuration specified in my Babel configuration file. There I have specified that I use React and that's why eslint will not complain anymore. This is how my Babel configuration file looks like:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Answer 5

This is rather silly for esLint but what I did to resolve it was to check file that is exporting, I accidentally had export class then export default connect. Still had lint error, re wrote import line in parent and eslint cleared warning.

Answer 6

You could add an exception in .eslintrc

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

Answer 7

You can as well use an alias at export and the opposite alias on import

Answer 8

If you really want to have this rule operating, while at the same time avoid it being triggered. You can be explicit about what you want to do.

Importing without the curly brackets, also means importing the default export. So you can be explicit about it like this --

import { default as ButtonBack } from '../ButtonBack'

And this will work even if your ButtonBack does not have a named export for ButtonBack at all, and only has a default export.

A good example might be the debug library in npm/node. It only has a default export, so if you want to avoid getting this error - what you can do is:

import { default as debug } from 'debug'

which will be exactly the same as

import debug from 'debug'

just without the eslint error.

Answer 9

I also encountered this problem while importing faker js I am importing like this:

import faker from '@faker-js/faker'

and getting eslint error:

warning Using exported name 'faker' as an identifier for default export import/no-named-as-default

The solution which worked for me is :

import { faker } from '@faker-js/faker'

So, in your case, you just need to change your importing to this

import {ButtonBack} from '../ButtonBack';