Javascript 如何解决 eslint import/no-named-as-default

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

提问by mrbinky3000

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.

在查看了 import/no-named-as-default eslint 规则的文档后，我仍然对我到底做错了什么感到困惑。

I have the following file structure

我有以下文件结构

.
├── ButtonBack.css
├── ButtonBack.jsx
├── __tests__
│   └── ButtonBack.test.jsx
└── index.js

The ButtonBack.jsx contains the following code

ButtonBack.jsx 包含以下代码

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

__tests__/ButtonBack.test.jsx 包含以下代码

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 '../ButtonBackviolates the following lint rules:

问题是，我的 linter 说这import ButtonBack from '../ButtonBack违反了以下 lint 规则：

• 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.

我不明白为什么我的导入语句违反了 lint 规则。删除 ButtonBack.jsx ( export default class extends React.Component) 中的类名也不能解决问题。

回答by Gregory Nowakowski

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."

“不幸的是，React + Redux 是最常见的场景。但是，还有很多其他情况 HOC 会迫使开发人员关闭此规则。”

https://github.com/benmosher/eslint-plugin-import/issues/544

https://github.com/benmosher/eslint-plugin-import/issues/544

https://github.com/reactjs/react-redux/issues/119

https://github.com/reactjs/react-redux/issues/119

https://github.com/18F/calc/pull/1235

https://github.com/18F/calc/pull/1235

.eslintrc

.eslintrc

"rules": {
    "import/no-named-as-default": 0
}

回答by Doug

Ran into this issue because I am using React+ Redux:

遇到这个问题是因为我正在使用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 ButtonBackwould also fix the problem, but I like to export it to help with testing.

不导出class ButtonBack也可以解决问题，但我喜欢导出它来帮助测试。

---

---

UPDATE 2019

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 和 container 使用单独的文件。我认为这可以使文件更小更易于理解。在这种情况下，我将有两个文件：

components/ButtonBack.js
containers/ButtonBackContainer.js

---

---

UPDATE 2020

2020 年更新

The no-named-as-defaulteslint rule is meant to help you in case you mistakenly import a default exportwhen you meant to import a named export.

在无命名为默认eslint规则的目的是帮助你在你的情况下错误地导入default export时，你的意思是导入named export。

I haven't ran into this issue for a while now because:

我已经有一段时间没有遇到这个问题了，因为：

• I avoid default exportswhen I can, as I think they can lead to mild confusion.
• I don't use the connectfunction anymore, I use the useSelectorhook instead.
• I usually test the component together with the redux store. Hereis an example on how to do that using React Testing Library.

• 我尽可能避免默认导出，因为我认为它们会导致轻微的混乱。
• 我不再使用该connect函数，而是使用useSelector钩子。
• 我通常将组件与redux store. 这是一个关于如何使用React Testing Library做到这一点的示例。

回答by sathishkumar

Original problem line :

原始问题行：

import ButtonBack from '../ButtonBack'; 

Fixed Line:

固定的线：

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

回答by Shawn Sheehan

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.

这对于 esLint 来说相当愚蠢，但我解决它的方法是检查正在导出的文件，我不小心有导出类然后导出默认连接。仍然有 lint 错误，在 parent 中重新写入 import 行并清除 eslint 警告。

回答by KevinH

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

安装此软件包后到您的 eslintrc 配置文件

npm install babel-eslint --save-dev

or

或者

yarn add babel-eslint --dev

Explanation

解释

babel-eslinttells 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:

babel-eslint告诉 eslint 使用我的 Babel 配置文件中指定的配置。我在那里指定我使用 React，这就是为什么 eslint 不再抱怨的原因。这是我的 Babel 配置文件的样子：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

回答by Carlo Rizzante

You could add an exception in .eslintrc

您可以在 .eslintrc 中添加异常

"rules": {
  "import/prefer-default-export": "off"
}

回答by fedeghe

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

您也可以在导出时使用别名，在导入时使用相反的别名