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 }