如何解决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语句违反了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,所以请考虑这个问题:

React

所以使用上面的代码,这会给我一个警告:

Redux

更改为以下内容可以解决问题

class ButtonBack

不出口React可能也会解决问题,但我喜欢将其导出以帮助测试.

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

Answer 3

原问题线:

import ButtonBack from '../ButtonBack'; 

固定的线:

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

Answer 4

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

解决方案

只需添加

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