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