如何解决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规则：

• import/no-named-as-default
• import/no-named-as-default-member

我无法弄清楚为什么我的import语句违反了lint规则。在ButtonBack.jsx（export default class extends React.Component）中删除类的名称也无法解决问题。

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

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也可以解决问题，但我喜欢将其导出以帮助测试。

资料来源：http://redux.js.org/docs/recipes/WritingTests.html#connected-components

编辑：

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

components/ButtonBack.js
containers/ButtonBackContainer.js

Answer 3

原问题线：

import ButtonBack from '../ButtonBack'; 

固定的线：

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

Answer 4

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

Answer 5

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

Answer 6

我在导入类组件时遇到了同样的问题，最终它就是这么简单的解决方案。

Solution

只需添加

"parser": "babel-eslint"

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

npm install babel-eslint --save-dev

要么

yarn add babel-eslint --dev

Explanation

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

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