web-dev-qa-db-ja.com

クラスReactのバグESlint、例： 'state'が定義されていません。 （undefなし）

私は実際にプロジェクトに取り組んでおり、MacBookでプロジェクトのクローンを作成したとき、インストールパッケージの場合はシェルでyarn、ATOMを開く場合はatom .の後に作成しました。 ESLintには「バグ」があります。

たとえば、このコードの場合：

/*
 * Package Import
 */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';


/*
 * Code
 */
class UserDropdown extends Component {
  /*
   * PropTypes
   */
   static propTypes = {
     ... // Code 
   }


  /*
   * State
   */
   state = {
     ... // Code
   };

  /*
   * Actions
   */
   onLogOut = () => {
     ... // Code
   };

ESLint教えてください：

Error   ESLint  'propTypes' is not defined. (no-undef)  22:10
Error   ESLint  'state' is not defined. (no-undef)  32:3
Error   ESLint  'onLogOut' is not defined. (no-undef)   52:3

私はまだ"babel-plugin-transform-class-properties": "^6.24.1"を使用しており、brunch-configで宣言しています：

私のブランチ-config.coffee

  plugins:
    babel:
      presets: ['latest', 'react']
      plugins: [
        'transform-class-properties'
        'transform-object-rest-spread'
      ]

私の.eslintrc

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "env": {
    "browser": true
  },
  "rules": {
    "brace-style": ["error", "stroustrup"],
    "no-param-reassign": ["error", { "props": false }],
    "no-mixed-operators": ["error", { "allowSamePrecedence": true }],
    "jsx-a11y/no-static-element-interactions": "off",
    "react/jsx-filename-extension": "off",
    "react/forbid-prop-types": "off",
    "react/no-unescaped-entities": "off",
    "linebreak-style": "off"
  },
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["app/"]
      }
    }
  }
}

そして私のPackages.json

"devDependencies": {
"auto-reload-brunch": "^2.7.1",
"autoprefixer": "^6.7.7",
"babel-brunch": "^6.1.1",
"babel-eslint": "^7.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.24.1",
"babel-resolver": "^1.1.0",
"brunch": "^2.10.9",
"chai": "^3.5.0",
"enzyme": "^2.8.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-import-resolver-node": "^0.3.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",

私は2台のコンピューターで作業していますが、LinuxではOKAYです。だから、誰かがアイデアを持っていますか？理解するためにさらにコードが必要な場合は、送信できます。ありがとうございます！

reactjseslinteslint-config-airbnb
8
Alexandre Bourdeaud'hui

同じ問題が発生しました。ESLint4がインストールされていたためです。 package.jsonをチェックして、"eslint": "^3.19.0 || ^4.3.0"のようなものではないことを確認してください。 create-react-appを使用していますが、ESLint 4とはまだ互換性がありません： https://github.com/facebookincubator/create-react-app/issues/2604

3
jeanfredrik

最初に、開発依存関係としてbabel-eslintをインストールする必要があります。次に、.eslintrcファイルに次を追加します。

"parser": "babel-eslint"
2
zied hajsalah

アップグレードeslint

npm i -D eslint@latest
1
qinggangxu

私はこの依存関係を使用してそれを修正しました：

package.json：

"dependencies": {
"react": "16.8.3",
"react-dom": "16.8.3",
"react-scripts": "2.1.8"
}

そして私はしました：

yarn
npm install [email protected]
yarn start

そしてそれは私のために働いた！

0
mzalazar

node、yarn、npmをアンインストールして問題を解決しました。私は最新バージョンのノードを使用しました（実際には8.2.1、npmとyarnについても同じです...）

したがって、Node LTS（6.11.1）のインストール後、ESLintに問題はありませんが、うまく機能しています。

編集：Yarn（0.27.5）を再インストールした後、この問題はここに戻ってきました：thinking：

0
Alexandre Bourdeaud'hui