javascript - 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
}