web-dev-qa-db-fra.com

Comment résoudre l'eslint import / no-named-as-default

Après avoir regardé la documentation de la règle eslint import/no-named-by-default, je suis toujours confus quant à ce que je fais exactement mal.

J'ai la structure de fichiers suivante

.
├── ButtonBack.css
├── ButtonBack.jsx
├── __tests__
│   └── ButtonBack.test.jsx
└── index.js

ButtonBack.jsx contient le code suivant

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 contient le code suivant

import React from 'react';
import { shallow } from 'enzyme';
import ButtonBack from '../ButtonBack'; // <== this line has an eslint warning

... code removed to keep example short ...

Le problème est que mon linter dit que import ButtonBack from '../ButtonBack enfreint les règles suivantes sur les peluches:

Je ne peux pas comprendre pourquoi ma déclaration d'importation viole la règle sur les peluches. Suppression du nom de la classe dans ButtonBack.jsx (export default class extends React.Component) ne résout pas non plus le problème.

javascripteslintes6-modules
20
mrbinky3000

Ran dans ce même problème et de ce que je vois, vous devrez juste désactiver cette règle (c'est ce que j'ai fait au moins)

"Malheureusement, React + Redux est le scénario le plus courant. Cependant, il existe de nombreux autres cas où les HOC forceront les développeurs à fermer cette règle."

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
}
25
Gregory Nowakowski

J'ai essayé ce problème car j'utilise React + Redux:

export class ButtonBack extends React.Component {
  // code removed
}
export default connect(null, null)(ButtonBack);

Donc, avec le code ci-dessus, cela me donnera un avertissement:

import ButtonBack from ./ButtonBack;

le passage aux éléments suivants résout le problème:

import ConnectedButtonBack from ./ButtonBack;

Pas d'exportation class ButtonBack résoudrait également le problème, mais j'aime l'exporter pour faciliter les tests.

Source: http://redux.js.org/docs/recipes/WritingTests.html#connected-components

Modifier:

Ma solution préférée pour ce problème est d'avoir des fichiers séparés pour les composants et le conteneur . Je pense que cela maintient les fichiers plus petits et plus faciles à comprendre. Dans ce cas, j'aurais deux fichiers:

components/ButtonBack.js
containers/ButtonBackContainer.js
12
Doug

Ligne de problème d'origine:

import ButtonBack from '../ButtonBack';

Ligne fixe:

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

C'est plutôt idiot pour esLint mais ce que j'ai fait pour le résoudre était de vérifier le fichier qui est en train d'exporter, j'ai accidentellement exporté la classe puis exporté la connexion par défaut. Il y avait toujours une erreur de peluche, la réécriture de la ligne d'importation dans le parent et l'avertissement effacé de eslint ont été réécrits.

2
Shawn Sheehan

Vous pouvez également utiliser un alias à l'exportation et l'alias opposé à l'importation

0
fedeghe

J'ai eu le même problème lorsque j'ai importé des composants de classe et c'était finalement une solution si simple.

Solution

Ajoutez simplement

"parser": "babel-eslint"

dans votre fichier de configuration eslintrc après avoir installé ce package avec

npm install babel-eslint --save-dev

ou

yarn add babel-eslint --dev

Explication

babel-eslint indique à eslint d'utiliser la configuration spécifiée dans mon fichier de configuration Babel. Là, j'ai spécifié que j'utilise React et c'est pourquoi eslint ne se plaindra plus. Voici à quoi ressemble mon fichier de configuration Babel:

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