web-dev-qa-db-ja.com

eslint import / no-named-as-defaultの解決方法

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 ...

問題は、私のリンターがimport ButtonBack from '../ButtonBackは、次のリント規則に違反しています。

インポートステートメントがリント規則に違反している理由がわかりません。 ButtonBack.jsxでクラスの名前を削除する（export default class extends React.Component）も問題を解決しません。

javascripteslintes6-modules
20
mrbinky3000

この同じ問題に遭遇し、私が見ていることから、あなたはそのルールを無効にする必要があります（少なくとも私はそれをしました）

「残念ながら、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
}
25
Gregory Nowakowski

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つのファイルがあります。

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

元の問題の行：

import ButtonBack from '../ButtonBack';

固定回線：

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

これはesLintではかなりばかげていますが、解決するために行ったのは、エクスポートするファイルをチェックすることでした。まだlintエラーがあり、インポート行を親に再書き込みし、eslintは警告をクリアしました。

2
Shawn Sheehan

エクスポート時にエイリアスを使用し、インポート時に反対のエイリアスを使用することもできます

0
fedeghe

クラスコンポーネントをインポートしたときに同じ問題が発生しましたが、最終的には非常に簡単なソリューションでした。

溶液

追加するだけ

"parser": "babel-eslint"

このパッケージをインストールした後、eslintrc設定ファイルに

npm install babel-eslint --save-dev

または

yarn add babel-eslint --dev

説明

babel-eslintは、バベル設定ファイルで指定された設定を使用するようにeslintに指示します。そこで、私はReactを使用することを指定しました。それがeslintがこれ以上文句を言わない理由です。これは私のBabel構成ファイルがどのように見えるかです：

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