Как разрешить импорт eslint / no-named-as-default

после просмотра документации для Правила ESLint import / no-named-as-default, я все еще смущен тем, что именно я делаю неправильно.

у меня есть следующая структура файлов

.
├── 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 ...
}

__тесты _ _ / ButtonBack.тест.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 ...

проблема в том, что мой Линтер говорит, что import ButtonBack from '../ButtonBack нарушает следующий lint правила:

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

Я не могу понять, почему мой оператор импорта нарушает правило lint. Удаление имени класса в ButtonBack.jsx (export default class extends React.Component) также не решает проблему.

9
es6-modules eslint javascript

4 ответов

столкнулся с этой же проблемой, и из того, что я вижу, вам просто нужно отключить это правило (это то, что я сделал, по крайней мере)

" к сожалению, React + Redux является наиболее распространенным сценарием. Однако, есть много других случаев, когда HOCs заставит разработчиков закрыли правило."

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

исходная проблемная строка:

import ButtonBack from '../ButtonBack';

Исправлена Строка: 

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

столкнулся с этой проблемой, потому что я использую 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

2

Это довольно глупо для esLint, но то, что я сделал, чтобы решить, это проверить файл, который экспортирует, у меня случайно был класс экспорта, а затем экспортировать соединение по умолчанию. Все еще была ошибка lint, повторно написал строку импорта в parent и eslint очистил предупреждение.

1