解决方案

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语句违反了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

Answer 3

原始问题行：

import ButtonBack from '../ButtonBack';

固定行：

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

Answer 4

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

Answer 5

您可以在.eslintrc中添加例外

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

Answer 6

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

Answer 7

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

解决方案

只需添加

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

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

7 个答案:

解决方案

说明