问题

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.

回答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
}

回答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 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.

Source: http://redux.js.org/docs/recipes/WritingTests.html#connected-components

Edit:

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

回答3:

Original problem line :

import ButtonBack from '../ButtonBack';

Fixed Line:

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

回答4:

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.

回答5:

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

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"]
}

回答6:

You can as well use an alias at export and the opposite alias on import

来源：https://stackoverflow.com/questions/44437203/how-do-i-resolve-eslint-import-no-named-as-default

标签

javascript

eslint

es6-modules

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

问题