Как разрешить импорт/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) также не решает проблему.

Ответы

Ответ 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
}

Ответ 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 также class ButtonBack бы проблему, но я хотел бы экспортировать его, чтобы помочь с тестированием.

Источник: http://redux.js.org/docs/recipes/WritingTests.html#connected-components

Редактировать:

Мое предпочтительное решение этой проблемы - иметь отдельные файлы для компонентов и контейнера. Я думаю, что это делает файлы меньше и легче для понимания. В этом случае у меня будет два файла:

components/ButtonBack.js
containers/ButtonBackContainer.js

Ответ 3

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

import ButtonBack from '../ButtonBack';

Фиксированная линия:

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

Ответ 4

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

Ответ 5

Вы также можете использовать псевдоним при экспорте и противоположный псевдоним при импорте

Ответ 6

У меня была такая же проблема, когда я импортировал компоненты класса, и это было таким простым решением.

Решение

Просто добавь

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