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

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.

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
}