Babel-eslint: Class properties resulting in false positive

Created on 13 Jun 2017 · 66Comments · Source: babel/babel-eslint

In the following JS I get a "no-undef" on webpack compilation because of inputPicks and contextTypes static class properties but it does not happen firing ESLint from command line.

export default class Input extends React.Component {
    static contextTypes = {
        formName: PropTypes.string.isRequired,
    }

    static inputPicks = ['minLength', 'maxLength', 'pattern']

    constructor(props) {
        super(props, context);
    }
...and so on

Package.json

    "eslintConfig": {
        "parser": "babel-eslint",
        "parserOptions": {
            "ecmaVersion": 2017,
            "sourceType": "module",
            "impliedStrict": true,
            "ecmaFeatures": {
                "jsx": true,
                "experimentalObjectRestSpread": true
            }
        },
        "env": {
            "browser": true,
            "node": true,
            "jest": true,
            "es6": true
        },
        "plugins": [
            "import",
            "react",
            "jest"
        ],
        "extends": [
            "eslint:recommended",
            "plugin:react/recommended",
            "plugin:jest/recommended"
        ],
        "rules": {
            "no-console": "off",
            "no-unused-vars": "off",
            "no-unsafe-finally": "off",
            "react/no-unescaped-entities": "off",
            "react/prop-types": "off"
        }
    },

Dependencies:

    "devDependencies": {
        "autobind-decorator": "^1.3.4",
        "autoprefixer": "^7.1.1",
        "babel-core": "^6.7.4",
        "babel-eslint": "^7.1.1",
        "babel-loader": "7.0.0",
        "babel-plugin-react-css-modules": "^2.6.0",
        "babel-plugin-syntax-class-properties": "^6.13.0",
        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "babel-polyfill": "^6.20.0",
        "babel-preset-env": "2.0.0-alpha.3",
        "babel-preset-react": "^6.5.0",
        "babel-preset-stage-0": "^6.16.0",
        "babili": "^0.1.2",
        "babili-webpack-plugin": "^0.1.1",
        "clean-webpack-plugin": "0.1.16",
        "compression-webpack-plugin": "^0.4.0",
        "css-loader": "^0.28.4",
        "cssnano": "^3.10.0",
        "eslint": "^4.0.0",
        "eslint-loader": "^1.6.1",
        "eslint-plugin-import": "^2.2.0",
        "eslint-plugin-jest": "^20.0.3",
        "eslint-plugin-react": "^7.0.1",
        "extract-text-webpack-plugin": "^2.1.0",
        "favicons-webpack-plugin": "^0.0.7",
        "file-loader": "^0.11.1",
        "history": "^4.6.1",
        "html-webpack-plugin": "^2.25.0",
        "img-loader": "^2.0.0",
        "json-loader": "^0.5.4",
        "material-ui": "^0.18.1",
        "material-ui-community-icons": "^0.15.0",
        "node-sass": "^4.1.1",
        "open-browser-webpack-plugin": "^0.0.5",
        "postcss-load-config": "^1.1.0",
        "postcss-loader": "^2.0.5",
        "postcss-scss": "^1.0.0",
        "query-string": "^4.3.4",
        "react": "^15.4.1",
        "react-addons-perf": "^15.4.2",
        "react-create-app": "^1.0.3",
        "react-create-store": "^1.0.4",
        "react-dimensions": "^1.3.0",
        "react-dom": "^15.4.1",
        "react-ga": "^2.2.0",
        "react-highcharts": "^12.0.0",
        "react-moment": "^0.2.4",
        "react-redux": "^5.0.1",
        "react-router": "^4.1.1",
        "react-router-dom": "^4.1.1",
        "react-router-redux": "next",
        "react-sizeme": "^2.3.2",
        "react-svg-inline": "^2.0.0",
        "react-swipeable-views": "^0.12.3",
        "react-tap-event-plugin": "^2.0.0",
        "react-transition-group": "^1.1.3",
        "recompose": "^0.23.4",
        "redux": "^3.6.0",
        "redux-action-buffer": "^1.0.1",
        "redux-actions": "^2.0.3",
        "redux-devtools-extension": "^2.13.2",
        "redux-logger": "^3.0.6",
        "redux-persist": "^4.1.0",
        "redux-persist-crosstab": "^3.5.2",
        "redux-promise": "^0.5.3",
        "redux-thunk": "^2.1.0",
        "sass-loader": "^6.0.5",
        "string-replace-loader": "^1.2.0",
        "style-loader": "^0.18.2",
        "stylelint-config-sass-guidelines": "^2.1.0",
        "stylelint-config-standard": "^16.0.0",
        "stylelint-scss": "^1.4.4",
        "stylelint-webpack-plugin": "^0.7.0",
        "url-loader": "^0.5.8",
        "webpack": "^2.5.1",
        "webpack-bundle-analyzer": "^2.8.2",
        "webpack-chunk-hash": "^0.4.0",
        "webpack-notifier": "^1.5.0"
    }

Source

damianobarbati

👍46

Most helpful comment

I verified it's caused by the monkey patch.
I started with the following versions and it worked perfectly.

"eslint": "^3.19.0",
"babel-eslint": "^7.2.3",

Then, after I upgraded to webpack 4, everything broke without changing any eslint related versions.
I found that webpack 4 introduced eslint-scope as a new dependency, and it seems like babel-eslint will try to use this eslint-scope instead of its own dependency escope.

I verified this by doing npm rm eslint-scope and run eslint again, then the eslint error goes away.

I don't know an easy way to get rid of eslint-scope, so I chose to upgrade to latest versions of eslint 4 and eslint-babel 8 in the end.

Bobgy on 18 Apr 2018

👍22

All 66 comments

I don't know where this bug is... here is the eslint ref
https://github.com/eslint/eslint/issues/8720

jsg2021 on 13 Jun 2017

👍1

wow I didn't see that: did you just open the same issue some hours before I did? xD
Maybe something due to latest updates?

damianobarbati on 13 Jun 2017

I opened it last night, but they (eslint) suggested the bug may be here.
So I came here to report... but found yours :)

jsg2021 on 13 Jun 2017

This is serious.
In order to compile I'm now with "no-undef": "off": I just lost the whole morning (~3hours) to track down a simple not defined variable which eslint would spot in milliseconds.

damianobarbati on 14 Jun 2017

👍1

Sorry this is causing issues. I'm not familiar with the codebase much. Could someone dive in a bit and provide a suggested solution/pull request?

kentcdodds on 14 Jun 2017

Is think broken in eslint 3.19 as well or just 4.0?

soda0289 on 14 Jun 2017

@soda0289 hell yeah, fixed in 4.0! Thanks so much ( @jsg2021 )

damianobarbati on 15 Jun 2017

👍1

i don't see any changes in this or eslint... how is it fixed?

jsg2021 on 15 Jun 2017

@soda0289 this wasn't a problem in eslint 3.x.x

jsg2021 on 15 Jun 2017

👍2

If this problem started with eslint v4 it probably has something to do with the new scope analysis fork eslint uses. It was changed from escope to eslint-scope.

I think the problem is that babel-eslint is failing to find and monkey patch eslint-scope. It might be finding escope from some other installation of eslint. How are you running eslint?

soda0289 on 15 Jun 2017

👍4

Rules in package.json

    "eslintConfig": {
        "parser": "babel-eslint",
        "parserOptions": {
            "ecmaVersion": 2017,
            "sourceType": "module",
            "impliedStrict": true,
            "ecmaFeatures": {
                "jsx": true,
                "impliedStrict": true,
                "globalReturn": false,
                "experimentalObjectRestSpread": true
            }
        },
        "env": {
            "browser": true,
            "node": true,
            "jest": true,
            "es6": true
        },
        "plugins": [
            "import",
            "react",
            "jest"
        ],
        "extends": [
            "eslint:recommended",
            "plugin:react/recommended",
            "plugin:jest/recommended"
        ],
        "rules": {
            "no-console": "off",
            "no-unused-vars": "off",
            "no-unsafe-finally": "off",
            "no-unreachable": "off",
            "react/no-unescaped-entities": "off",
            "react/prop-types": "off"
        }
    },
    "stylelint": {
        "extends": [
            "stylelint-config-standard",
            "stylelint-config-sass-guidelines"
        ],
        "rules": {
            "indentation": 4,
            "no-missing-end-of-source-newline": null,
            "selector-list-comma-newline-after": null,
            "max-nesting-depth": null,
            "selector-pseudo-class-no-unknown": [
                true,
                {
                    "ignorePseudoClasses": [
                        "global",
                        "local"
                    ]
                }
            ]
        }
    },
    "babel": {
        "presets": [
            [
                "env",
                {
                    "targets": {
                        "browsers": [
                            "chrome 54",
                            "safari 9",
                            "firefox 50",
                            "edge 12",
                            "explorer 11"
                        ]
                    },
                    "modules": false,
                    "useBuiltIns": true,
                    "debug": true
                }
            ],
            "stage-0",
            "react"
        ],
        "plugins": [
            "transform-decorators-legacy",
            "transform-class-properties",
            [
                "react-css-modules",
                {
                    "filetypes": {
                        ".scss": "postcss-scss"
                    }
                }
            ]
        ]
    },
    "jest": {
        "bail": true
    },
    "dependencies": {
        "array-to-csv": "^1.0.1",
        "axios": "^0.16.2",
        "better-console": "^1.0.0",
        "child-process-promise": "^2.2.1",
        "compare-versions": "^3.0.1",
        "cssnano-preset-default": "^4.0.0-rc.0",
        "csv-parse": "^1.2.0",
        "csvjson": "^4.3.3",
        "docdash": "^0.4.0",
        "esdoc": "^0.5.2",
        "fs-promise": "^2.0.2",
        "jest": "^20.0.4",
        "jsdoc": "^3.4.3",
        "jsdoc-strip-async-await": "^0.1.0",
        "jws": "^3.1.4",
        "koa": "^2.2.0",
        "koa-basic-auth": "^2.0.0",
        "koa-better-ratelimit": "^2.1.2",
        "koa-body": "^2.1.0",
        "koa-compress": "^2.0.0",
        "koa-cors": "0.0.16",
        "koa-json": "^2.0.2",
        "koa-mount": "^3.0.0",
        "koa-passport": "^3.0.0",
        "koa-remove-trailing-slashes": "1.0.0",
        "koa-router": "^7.2.0",
        "koa-send": "^4.1.0",
        "koa-sslify": "^2.1.2",
        "koa-useragent": "^1.0.0",
        "lodash": "^4.17.4",
        "moment": "^2.18.1",
        "moment-timezone": "^0.5.13",
        "mz": "^2.6.0",
        "node-schedule": "^1.1.1",
        "node-xlsx": "^0.7.4",
        "nodemailer": "^4.0.1",
        "passport": "^0.3.2",
        "passport-facebook": "^2.1.1",
        "passport-google-oauth": "^1.0.0",
        "pm2": "^2.4.4",
        "sequelize": "^4.1.0",
        "slack-node": "^0.1.8",
        "sleep-promise": "^2.0.0",
        "sqlite3": "^3.1.8",
        "stripe": "^4.22.0",
        "tsv": "^0.2.0",
        "xlsx-populate": "^1.6.0",
        "yargs": "^8.0.1"
    },
    "devDependencies": {
        "autobind-decorator": "^1.3.4",
        "autoprefixer": "^7.1.1",
        "babel-core": "^6.7.4",
        "babel-eslint": "^7.1.1",
        "babel-loader": "7.0.0",
        "babel-plugin-react-css-modules": "^2.6.0",
        "babel-plugin-syntax-class-properties": "^6.13.0",
        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "babel-polyfill": "^6.20.0",
        "babel-preset-env": "2.0.0-alpha.3",
        "babel-preset-react": "^6.5.0",
        "babel-preset-stage-0": "^6.16.0",
        "babili": "^0.1.3",
        "babili-webpack-plugin": "^0.1.0",
        "case-sensitive-paths-webpack-plugin": "^2.1.1",
        "clean-webpack-plugin": "0.1.16",
        "compression-webpack-plugin": "^0.4.0",
        "css-loader": "^0.28.4",
        "cssnano": "^3.10.0",
        "deep-diff": "^0.3.8",
        "eslint": "^4.0.0",
        "eslint-loader": "^1.8.0",
        "eslint-plugin-import": "^2.2.0",
        "eslint-plugin-jest": "^20.0.3",
        "eslint-plugin-react": "^7.1.0",
        "extract-text-webpack-plugin": "^2.1.0",
        "favicons-webpack-plugin": "^0.0.7",
        "file-loader": "^0.11.1",
        "history": "^4.6.2",
        "html-webpack-plugin": "^2.25.0",
        "img-loader": "^2.0.0",
        "json-loader": "^0.5.4",
        "material-ui": "^0.18.1",
        "material-ui-community-icons": "^0.15.0",
        "node-sass": "^4.1.1",
        "open-browser-webpack-plugin": "^0.0.5",
        "postcss-load-config": "^1.1.0",
        "postcss-loader": "^2.0.5",
        "postcss-scss": "^1.0.0",
        "query-string": "^4.3.4",
        "react": "^15.6.1",
        "react-addons-perf": "^15.4.2",
        "react-create-app": "^1.0.3",
        "react-create-store": "^1.0.4",
        "react-dimensions": "^1.3.0",
        "react-dom": "^15.6.1",
        "react-ga": "^2.2.0",
        "react-highcharts": "^12.0.0",
        "react-moment": "^0.2.4",
        "react-redux": "^5.0.1",
        "react-router": "^4.1.1",
        "react-router-dom": "^4.1.1",
        "react-router-redux": "next",
        "react-sizeme": "^2.3.2",
        "react-svg-inline": "^2.0.0",
        "react-swipeable-views": "^0.12.3",
        "react-tap-event-plugin": "^2.0.0",
        "react-transition-group": "^1.1.3",
        "recompose": "^0.23.4",
        "redux": "^3.6.0",
        "redux-action-buffer": "^1.0.1",
        "redux-actions": "^2.0.3",
        "redux-devtools-extension": "^2.13.2",
        "redux-logger": "^3.0.6",
        "redux-persist": "^4.1.0",
        "redux-persist-crosstab": "^3.5.2",
        "redux-promise": "^0.5.3",
        "redux-thunk": "^2.1.0",
        "sass-loader": "^6.0.6",
        "string-replace-loader": "^1.2.0",
        "style-loader": "^0.18.2",
        "stylelint-config-sass-guidelines": "^2.1.0",
        "stylelint-config-standard": "^16.0.0",
        "stylelint-scss": "^1.4.4",
        "stylelint-webpack-plugin": "^0.7.0",
        "url-loader": "^0.5.8",
        "webpack": "^2.5.1",
        "webpack-bundle-analyzer": "^2.8.2",
        "webpack-chunk-hash": "^0.4.0",
        "webpack-notifier": "^1.5.0"
    }
}

damianobarbati on 15 Jun 2017

I'm on npm 5, node 8.
I execute eslint by: eslint --ext .js,.jsx ./src
my eslint config is pretty simple...

{
    extends: 'eslint:recommended',
    parser: 'babel-eslint',
    parserOptions: {
        ecmaVersion: 2017,
        sourceType: 'module',
        ecmaFeatures: {
            experimentalObjectRestSpread: true,
            impliedStrict: true,
            globalReturn: false
        }
    },

    env: {
        es6: true,
        node: true,
        browser: true,
        jest: true
    }
}

eslint is only depended on once in my package.

jsg2021 on 15 Jun 2017

@jsg2021

So you are using the globally installed eslint. Can you try the locally installed one:
node node_modules/.bin/eslint --ext .js,.jsx ./src

soda0289 on 15 Jun 2017

that was the local one. I have ./node_modules/.bin/ on my path. I don't use global packages.

jsg2021 on 15 Jun 2017

I'm always local:

    "scripts": {
        "pm2": "./node_modules/pm2/bin/pm2",
        "lint": "./node_modules/eslint/bin/eslint.js --ignore-path .gitignore --ignore-pattern **/*.min.js .",

damianobarbati on 15 Jun 2017

Why is this issue closed? There are multiple reports here and in eslint:
eslint/eslint#8720

Lyncredible on 16 Jun 2017

👍1

This issue was resolved for me when upgrading to 7.2.2 (might have even worked before that, only know it did not work with 6.1.2).

ryanzec on 30 Jun 2017

👍1

Occurs for me on 7.2.2 and eslint 4.3.0

backjo on 25 Jul 2017

👍3

Same here on 7.2.3 and ESLint 4.3.0.

ChristianGrete on 27 Jul 2017

👍3

This was fixed for us (node 6.2.0) by explicitly invoking the ./node_modules/eslint/bin/eslint.js script rather than using the binary in ./node_modules/.bin/eslint I would suggest that perhaps there's some issue with the binary being generated in 4.3.x?

AdamMcCormick on 29 Jul 2017

It just went away for me... don't know when/how it changed.
I'm on node 8.2.1, npm 5.3.0, latest eslint 4.x, latest babel 6.x, babel-eslint 7.x

jsg2021 on 29 Jul 2017

I'm having this problem with node v6.11.1, npm 5.3, [email protected], babel-eslint@^7.2.3 [email protected] [email protected]

hsingh23 on 31 Jul 2017

👍5

Same for me! ALARM!

chiharahwost on 1 Aug 2017

👎7 👍3

I can confirm I'm having this same issue as well. no-undef false positive with babel-esint: 7.2.3 and eslint: 4.4.1

mikefisher84 on 10 Aug 2017

👍6

I was getting this just in the webpack build, and not when running eslint from the command line. I deleted the node_modules folder and did a yarn install and all the problems went away. babel-esint: 7.2.3 and eslint: 4.4.1

colinweight on 11 Aug 2017

FWIW it appears to occur when packages are installed with Yarn instead of NPM. Running npm rebuild after a fresh yarn install fixes the problem for me.

This is the content of the package.json file:

{
  ...
  "scripts": {
    ...
    "lint": "eslint --cache --ext .jsx,.js .",
    ...
  },
  ...
  "devDependencies": {
    ...
    "eslint": "4.4.1",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.2.0",
    ...
  },
  ...
}

These are the versions of Node, NPM, and Yarn running on my machine:

node --version
v6.11.2

npm --version
3.10.10

yarn --version
0.27.5

ctumolosus on 12 Aug 2017

❤2

We also have this exact problem after upgrading to latest eslint and babel-eslint.

eXaminator on 25 Aug 2017

👍13

I am having this issue after upgrade.
My devDependencies are:

  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "babel-core": "^6.25.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.0",
    "babel-plugin-angularjs-annotate": "^0.8.0",
    "babel-plugin-flow-runtime": "^0.11.1",
    "babel-plugin-syntax-flow": "^6.8.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-env": "^1.6.0",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^0.28.4",
    "del-cli": "^1.1.0",
    "eslint": "^4.6.1",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-plugin-flowtype": "^2.34.0",
    "eslint-plugin-import": "^2.7.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.1",
    "firebase-tools": "^3.9.2",
    "flow-bin": "^0.53.1",
    "flow-runtime-mobx": "^0.14.0",
    "html-loader": "^0.5.0",
    "html-webpack-plugin": "^2.30.1",
    "mobx-logger": "^0.6.0",
    "ngtemplate-loader": "^2.0.1",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.1",
    "svgo": "^0.7.2",
    "svgo-loader": "^1.2.1",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^2.4.5",
    "webpack-notifier": "^1.5.0",
    "xo": "^0.18.2",
    "yargs": "^8.0.1"
  }

xlc on 10 Sep 2017

Seems like I've encountered this problem after adding flow related packages:

    ...
+   "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^7.2.3",
    "babel-jest": "^21.0.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-lodash": "^3.2.11",
    "babel-plugin-module-resolver": "^2.7.1",
    "babel-plugin-ramda": "^1.4.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-constant-elements": "^6.23.0",
    "babel-plugin-transform-react-inline-elements": "^6.22.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
    "babel-preset-env": "^1.6.0",
+   "babel-preset-flow": "^6.23.0",
    "babel-preset-jest": "^21.0.0",
    "babel-preset-react": "^6.24.1",
    ...
    "eslint": "3.19.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-import-resolver-babel-module": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-plugin-babel": "^4.1.2",
    "eslint-plugin-compat": "^1.0.4",
    "eslint-plugin-fetch": "0.0.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "^7.3.0",
    "eventsource-polyfill": "^0.9.6",
+   "flow-bin": "^0.54.1",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^21.0.1",
    ...
+   "prettier-eslint": "^8.0.0",
    ...

amankkg on 16 Sep 2017

Same issue.

SupremeTechnopriest on 17 Sep 2017

I can also confirm that we have no-undef false positive with babel-esint: ^7.2.3 and eslint: ^4.4.1.

shinxi on 22 Sep 2017

ArtemBernatskyy on 24 Sep 2017

Is anyone taking a look at this? It seems this should be done by someone who knows a bit about eslints and this plugins internals to make the correct adjustments needed for the newer eslint versions?

eXaminator on 25 Sep 2017

👍3

joejuzl on 5 Oct 2017

also happening with eslint 3.19.0 and babel-eslint 7.2.3
Any workaround for this for the time being without just disabling no-undef ?

goozo on 13 Oct 2017

i solved this by updating the relative dependencies.
new version :
"eslint": "^4.8.0",
"babel-eslint": "^8.0.1"

hope it helps

ericyang89 on 14 Oct 2017

👍12 🎉2 👎2 ❤1

It works by eslint . --ext js,jsx
But it is broken when use new CLIEngine().executeOnFiles(['path/to/files'])

node 8.4.0
babel-eslint 8.0.1
eslint: 4.9.0

doxiaodong on 17 Oct 2017

👍2

Still occurring with

eslint ^4.11 babel-eslint ^8.0.2 node 8.9.1

wojciech-bilicki on 15 Nov 2017

😕3 👍1

There's been changes in the class-properties implementation in 7.0.0-beta.x after v6.x see.

http://www.mergely.com/4LNZVfuO/

rakeen on 16 Nov 2017

Was seeing this error, then updated to "eslint": "^4.12.0" and "babel-eslint": "^8.0.2" and now it's fixed. Updating only babel-eslint did not fix it. I'm on node v8.8.1 and npm v5.5.1

iabw on 29 Nov 2017

👍2

This issue started for me when I added prettier-eslint. prettier-eslint is using "eslint": "^4.5.0", if I add "[email protected]" (when they're using eslint 3.1.9) the issue goes away. I'm using "eslint": "3.19.0" and "babel-eslint": "7.2.3"

bjenkins24 on 10 Dec 2017

Reverted from [email protected] to [email protected] and all is well 👌

Didn't even need to change my eslint version. Kept eslint the whole time at 4.13.1

$ node -v
v8.9.2

$ npm -v
5.5.1

dawsbot on 13 Dec 2017

I am experiencing the same issue. If I use [email protected] the errors goes away. But if I upgrade to [email protected] I start to get these errors.

I don't use Eslint, but Standard instead. First I thought it was something wrong with Standard, but after finding this issue I understand that it has something to do with babel-eslint.

How come these kind of issues starts to occur with babel-eslint@^8.x.x?

$ node -v
v9.2.0

$ npm -v
5.5.1

  devDependencies: {
    ...
    "babel-eslint": "7.2.3",
    "husky": "^0.14.3",
    "snazzy": "^7.0.0",
    "standard": "^10.0.3",
    ...
  },
  "lint-staged": {
    "*.js": [
      "yarn run lint",
      "git add"
    ]
  },
  "config": {},
  "standard": {
    "parser": "babel-eslint",
    "globals": [
      "describe",
      "test",
      "jest",
      "expect",
      "fetch",
      "navigator",
      "__DEV__",
      "XMLHttpRequest",
      "FormData",
      "React$Element"
    ]
  }

nonameolsson on 26 Dec 2017

👍8

I still have this problem in 8.2.1 !!

MostafaNasiri on 18 Jan 2018

👍7

I updated all my packages, see my package.json:

"devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.16.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1"
  },

and my .eslintrc is so

"parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
 ],

I hope I can have helped

davidsonsns on 23 Jan 2018

👍6 🎉2

Same here, tried above and it's the same.

focux on 2 Feb 2018

From what I can tell, this is now fixed in babel-eslint ^8.1.0, which drops the unreliable monkey-patching in favor of the new eslint parser API. To make this work, you also need eslint ^4.14.0, which is the first release that includes the new parser API. Otherwise, babel-eslint will fall back on the old & buggy code path.

swansontec on 14 Feb 2018

👍8 ❤4

Still happens to me:

    "babel-core": "^6.26.0",
    "babel-eslint": "7.2.3",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-react-native": "^4.0.0",
    "eslint": "4.13.1",
    "eslint-config-standard-react": "^5.0.0",
    "eslint-plugin-flowtype": "^2.44.0",
    "standard": "^10.0.3"

  "standard": {
    "plugins": [
      "flowtype"
    ],
    "parser": "babel-eslint"
  }

{
  "parser": "babel-eslint",
  "extends": [
    "standard",
    "standard-react"
  ]
}

@swansontec I tried with [email protected] and [email protected] and also had the issues

sidferreira on 20 Feb 2018

With eslint at ^4.18.1 and babel-eslint at ^8.2.2 the issue is gone for me.

If, like me, you have a global installation of eslint, you might want to check where the command is being run from. In my case the eslint version inside the project dependencies, where it was being run from, was an older one. After updating the dependency, props are no longer producing lint errors for me. Hope this helps!

hkmarques on 2 Mar 2018

👍5

hey, it seems this still break eslint@3, maybe should pick a patch?

atian25 on 24 Mar 2018

I verified it's caused by the monkey patch.
I started with the following versions and it worked perfectly.

"eslint": "^3.19.0",
"babel-eslint": "^7.2.3",

I verified this by doing npm rm eslint-scope and run eslint again, then the eslint error goes away.

I don't know an easy way to get rid of eslint-scope, so I chose to upgrade to latest versions of eslint 4 and eslint-babel 8 in the end.

Bobgy on 18 Apr 2018

👍22

What @Bobgy said - just experienced the same thing with the same versions after an update to webpack 4.

SethDavenport on 25 Apr 2018

👍2

Just ran into this issue when I bumped the version of an unrelated dependency (not eslint/webpack/babel-eslint). Our organization has numerous modules using eslint v3 and babel-eslint v7. One common dependency was updated that uses eslint v4. This caused eslint-scope to bubble up to the top node_modules directory which switched eslint v3 to now load it. This resulted in all our module eslints now falsely failing for no-undef errors for things like static class properties.

Seems like this issue should really be addressed as bringing in an unrelated dependency should not cause this sort of side affect.

purdrew on 13 Jul 2018

👍1

upgrade eslint latest
npm i -D eslint@latest

xuqinggang on 25 Jul 2018

👎6 😕1 👍1

This bug is back with babel-eslint@^9 and instance fields containing bound methods:

class asdf {
  m = () => { // <-- BORK rule: 'no-undef', add eslint-disable-next-line no-undef above to workaround

  }
}

Tapppi on 17 Sep 2018

👍3

Same issue:

    "eslint": "^4.13.1",
    "babel-eslint": "^10.0.1",
node: 10.10.0

class CustomDialog extends React.Component {
    state = {  // <----[eslint] 'state' is not defined. (no-undef)
        open: false,
    };

croraf on 7 Oct 2018

👍2

In a yarn workspace, you can prevent hoisting of the problematic eslint-scope package with the following config in your package.json:

"workspaces": {
  "packages": [
    "packages/*"
  ],
  "nohoist": [
    "**/eslint-scope"
  ]
},

kryops on 12 Nov 2018

👍1

I updated all my packages, see my package.json:

"devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.16.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1"
  },

and my .eslintrc is so

"parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
 ],

I hope I can have helped

It's worked for me!

Tanatcu on 22 Dec 2018

In a yarn workspace, you can prevent hoisting of the problematic eslint-scope package with the following config in your package.json:
"workspaces": {
  "packages": [
    "packages/*"
  ],
  "nohoist": [
    "**/eslint-scope"
  ]
},

@kryops this method is work for me! 👏

linxiaowu66 on 3 Jun 2019

Upgrading to:
{
"eslint": "^5.16.0",
"babel-eslint": "^10.0.1",
}

Solved the issue for me.

chenop on 16 Jun 2019

👍2

Having these issues with:
{
"eslint": "^3.1.0",
"babel-eslint: "^9.0.0"
}

robbykim on 3 Oct 2019

Having the same issue with
{
"eslint": "^3.6.0",
"babel-eslint": "^9.0.0","
}
Unfortunately upgrade to

{
"eslint": "^5.16.0",
"babel-eslint": "^10.0.1",
}

doesn't work for me

swen-ihealthlabs on 17 Oct 2019

Any update on this issue? i have the same problem btw after upgrading babel from v6 to v7. using eslint 3.19.0 and babel eslint version 9.0.0

ahmad-reza619 on 26 Nov 2019

Since people (including me recently) are still running into this issue, and I just spent quite some time figuring it out, I would like to post a long answer with some reference.

TL;DR

This should be solved by

{
    "eslint": ">=4.14.0",
    "babel-eslint": ">=8.1.0"
}

with fix from eslint/eslint PR#8755,
and fix from babel/babel-eslint PR#542.
Thanks to @mysticatea for the hard work.

Explanation:
This is a issue caused by the 'scope analyze' in eslint. In the older version (<4.14.0), eslint analyze the scope by its own without passing in the correct childVisitorKeys attribute.

// eslint.js
// gather scope data that may be needed by the rules
scopeManager = escope.analyze(ast, {
    ignoreEval: true,
    nodejsScope: ecmaFeatures.globalReturn,
    impliedStrict: ecmaFeatures.impliedStrict,
    ecmaVersion,
    sourceType: currentConfig.parserOptions.sourceType || "script",
    fallback: Traverser.getKeys
});

https://github.com/eslint/eslint/blob/421aab44a9c167c82210bed52f68cf990b7edbea/lib/eslint.js#L892

A correct scope after parser.parse() requires corresponding childVisitorKeys defined by different parser, as PR#8755 explains.

After those two PRs, babel-eslint will generate the scopeManager with its own modification.
eslint will consume the scopeManager (const scopeManager = parseResult.scopeManager;), and apply rules over it.

Take away:
It costs time to locate the root cause for this kind of issue if you are not familiar with the massive project like eslint (or ast concept), not to mention it normally comes with several more issues together. If you really want to do the research, start from the rules folder and analyze specific rule to get two cents about what goes wrong, in this case, it's the scope. It would be much easier then to narrow down your research in scope-related logic in parse().

The easy way to 'just make things work' is always upgrade version.

congcongcong250 on 11 Dec 2019

👀1 🎉1

Getting this issue (using React Native).

I previously only had "eslint-config-rallycoding": "^3.2.0" in my dev dependencies and eslint installed globally and everything was going smoothly. I had to install babel-eslint 7.2.1 to get operator chaining (a?.b) working without errors.

This then caused this issue where arrow functions on classes were "undefined". I upgraded to the latest babel-eslint, and this gave me the error that it couldn't find "eslint-scope".

~~Installing the latest eslint in dev dependencies then caused files to stop linting at all.~~

After installing the latest eslint in dev dependencies, renaming the workspace folder and restarting VSCode seemed to reset things and got everything working.

dancherb on 30 Dec 2019

Thank you for the issue. Now that @babel/eslint-parser has been released, we are making this repository read-only. If this is a change you would still like to advocate for, please reopen this in the babel/babel monorepo.