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

Question

在查看了 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 规则：

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

Answer 1

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

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

Answer 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 测试库.

Answer 3

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

Answer 4

原问题行：

import ButtonBack from '../ButtonBack';

固话：

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

Answer 5

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

Answer 6

我在导入 class 个组件时遇到了同样的问题，最终这是一个非常简单的解决方案。

解决方案

只需添加

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

Answer 7

您可以在 .eslintrc 中添加例外

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

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

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

javascript

eslint

es6-modules

2019 年更新

2020 年更新

解决方案

说明