【问题标题】：How do I resolve eslint import/no-named-as-default如何解决 eslint import/no-named-as-default
【发布时间】：2017-11-10 06:09:03
【问题描述】：

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

我有以下文件结构

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

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 包含以下代码

import React from 'react';
import { shallow } from 'enzyme';
import ButtonBack from '../ButtonBack'; // <== this line has an eslint warning

... code removed to keep example short ...

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

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

【问题讨论】：

ButtonBack.jsx 中还有其他的exports，还是只有export default class ButtonBack？
只有一个出口。
您是否找到了解决方案，还是您只是禁用了该规则？
我刚刚禁用了规则。 ??????
这个 ESLint 规则很烂

标签： javascript eslint es6-modules

【解决方案1】：

遇到了同样的问题，据我所知，您只需要禁用该规则（至少我就是这样做的）

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

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】：

遇到这个问题是因为我使用的是React + Redux:

export class ButtonBack extends React.Component {
  // code removed
}
export default connect(null, null)(ButtonBack);

所以使用上面的代码，这个导入会给我一个警告：

import ButtonBack from ./ButtonBack;

更改为以下解决问题：

import ConnectedButtonBack from ./ButtonBack;

不导出class ButtonBack 也可以解决问题，但我喜欢将其导出到help with testing。

2019 年更新

我对这个问题的首选解决方案是为组件和容器设置单独的文件。我认为这可以使文件更小，更容易理解。在这种情况下，我将有两个文件：

components/ButtonBack.js
containers/ButtonBackContainer.js

2020 年更新

no-named-as-default eslint 规则旨在帮助您，以防在您打算导入 named export 时错误地导入 default export。

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

我会尽可能avoid default exports，因为我认为它们会导致轻微的混乱。
我不再使用connect 函数，而是使用useSelector 挂钩。
我通常与redux store 一起测试该组件。 Here 是一个示例，说明如何使用 React 测试库 做到这一点。

【讨论】：

另一种解决方案是“import { ButtonBack } from ./ButtonBack;”如果我想在导入中也保留相同的组件名称，我更喜欢这个解决方案。
@arun8 如果您使用的是 redux，那不是解决方案。 import { ButtonBack } from ./ButtonBack; 和 import ConnectedButtonBack from ./ButtonBack; 是两个不同的东西。一个是普通组件，另一个是连接组件。
我个人觉得调用“ConnectedButtonBack”非常笨拙。此外，我认为拥有两个没有完全不同的目的并且直接链接的文件也很笨重。我个人调用我的纯函数_ButtonBack，然后导出连接的组件。这样，如果我需要纯版本（通常仅用于测试），我可以使用import { _ButtonBack }，如果我需要连接版本，我可以使用import ButtonBack。这比到处添加“纯”或“连接”或类似的词要少。只是我的意见！
@MattFletcher 将其命名为_ButtonBack 给人的印象是它是私密的，不应被触及。你不认为这违背了 React 的设计——我们希望有可重用的组件吗？
@doug 它们仍然是可重用的组件——只是命名约定很烦人，因为它经常在其他地方被用来暗示隐私，而 JS 中确实没有什么是私有的。

【解决方案3】：

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

【讨论】：

【解决方案4】：

原问题行：

import ButtonBack from '../ButtonBack';

固定线路：

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

【讨论】：

虽然这在一般情况下可能有效，但如果您使用 react/redux，则需要小心，因此将您的 react 组件包装在 redux 的 connect()(yourCompnent) 方法中。如果你用花括号将导出包裹起来，你将不会导出连接的组件。
简单的答案，但我不知道它修复了什么，因为我的导出是默认的
不错且准确的答案...谢谢

【解决方案5】：

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

【讨论】：

【解决方案6】：

我在导入类组件时也遇到了同样的问题，最后解决起来很简单。

解决方案

只需添加

"parser": "babel-eslint"

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

npm install babel-eslint --save-dev

或

yarn add babel-eslint --dev

说明

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

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

【讨论】：

【解决方案7】：

你可以在 .eslintrc 中添加一个异常

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

【讨论】：