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

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
}

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.

Original problem line :

import ButtonBack from '../ButtonBack'; 

Fixed Line:

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