no-undef error after today's babel update

[divsbhalala]

no-undef error after today's babel update

[babel-bot]

Hey @divsbhalala! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[ashvin777]

I am also experiencing same without any changes in any of the package.json modules which were working previously.
40:3 error 'state' is not defined no-undef

My class code sample -

class SomeClass {
    state = {}
}

Please help!!

[vinodgubbala]

same. it started failing for us too. Trying to downgrade, unless someone has better explanation for this error!

[meltalite]

Count me in.

In my package.json, I used @svgr/webpack which depends on @babel/preset-env which depends on many @babel/xxx that got updated several hours ago.

class Foo {
  static BAR = ""
}

will print Line 2: BAR is not defined no-undef

[ajayvjain]

We are also facing the same issue with the new update, blocked for our builds.

[mstreng-bhs]

Same here. For now, just downgrading helps.

[nileshbhingaradiya]

I am also getting the same error on all js file
all function and variable give error is not defined

[ashvin777]

Same here. For now, just downgrading helps.

How do we downgrade ?

[nicolo-ribaudo]

As a workaround, make sure that @babel/eslint-parser is updated to the last version.

[ashvin777]

As a workaround, make sure that @babel/eslint-parser is updated to the last version.

Tried but doesn't seem to work.

[nicolo-ribaudo]

Could you share your lockfile?

[ashvin777]

With @babel/eslint-parser or without ?

[nicolo-ribaudo]

With, to check what could be causing the problem 🙏

[ashvin777]

Ok, give me a couple of minutes. Currently removed all node_modules and lock file and trying to reinstall everything from zero.

[ashvin777]

Here is the lock file -
package-lock.json.zip

[m3yevn]

our create-react-app 's class components are failing with no-undef error for arrow functions. looks like recent update of babel might be the cause. any workaround to fix it?

[ashvin777]

Here is the lock file -
package-lock.json.zip

Also the eslint file

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "babel"
  ],
  "env": {
    "es6": true,
    "browser": true,
    "jasmine": true,
    "node": true,
    "amd": true
  },
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "globals": {
    "module": true,
    "inject": true,
    "_": true,
    "NODE_ENV": true,
    "VERSION": true,
    "L": true,
    "setFixtures": true,
    "jest": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "strict": "off",
    "consistent-return": "off",
    "valid-jsdoc": "off",
    "no-console": "off",
    "react/prop-types": "off",
    "max-len": ["warn", {
      "code": 120,
      "tabWidth": 2,
      "ignoreTrailingComments": true,
      "ignorePattern": "^import"
    }],
    "quotes": ["error", "single", {"allowTemplateLiterals": true}],
    "no-unused-vars": ["error", {"caughtErrorsIgnorePattern": "[iI]gnore"}],
    "no-debugger": "error",
    "curly" : "error",
    "no-constant-condition": "error",
    "no-caller": "error",
    "guard-for-in": "error",
    "no-eval": "error",
    "no-extra-bind": "error",
    "no-implicit-globals": "error",
    "no-implied-eval": "error",
    "no-iterator": "error",
    "no-lone-blocks": "error",
    "no-loop-func": "error",
    "yoda": "error",
    "indent": ["error", 2, {"SwitchCase": 1}],
    "no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
    "no-empty": "error",
    "no-extra-semi": "error",
    "comma-dangle": ["error", "never"],
    "comma-spacing": ["error", {"before": false, "after": true}],
    "keyword-spacing": "error",
    "no-empty-function": ["error", {"allow": ["arrowFunctions"]}],
    "yield-star-spacing": ["error", "after"],
    "no-trailing-spaces": "warn",
    "no-cond-assign": "error",
    "no-dupe-args": "error",
    "no-dupe-keys": "error",
    "no-duplicate-case": "error",
    "no-ex-assign": "error",
    "no-extra-boolean-cast": "error",
    "semi": ["error", "always"],
    "no-invalid-regexp": "error",
    "no-sparse-arrays": "error",
    "no-unexpected-multiline": "error",
    "no-unreachable": "error",
    "use-isnan": "error",
    "accessor-pairs": "error",
    "no-proto": "error",
    "one-var": ["error", "never"]
  }
}

[dharmesh03]

I am using the below babel package and getting the same error from the last 6hour

 "@babel/core": "^7.10.2",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "babel-eslint": "^10.1.0",

[nicolashu]

My workaround, adding following in package.json:

"resolutions": {
  "@babel/parser": "7.12.17"
}

[m3yevn]

"resolutions": {
"@babel/parser": "7.12.17"
}

does this work for create-react-app based project?

[nicolo-ribaudo]

Working on this, the fix should be out soon.

[ashvin777]

Awesome, @nicolo-ribaudo .

[elaineKuo]

I also have the same error，please fix it soon。

[cemalettin-work]

In my use-case, eslint-parser was not seeing the React class component's prop-types. So this works:

MyComp.propTypes = ...

But this doesn't work:

class MyComp extends React.Component {
static propTypes = ...

I get the 'react/prop-types' error while building the project. I suspect the class syntax implementation has a bug.

[nicolo-ribaudo]

@cemalettin-simsoft In that case the problem is that eslint-plugin-react doesn't support the ESTree ASTs (which is the AST used by ESLint).

In this case it's broken by us because we implemented ESTree-like class features in 7.13.0, but it would have also be broken if ESLint natively started supporting class features.

[ashvin777]

Okay, but what's the resolution?

[nicolo-ribaudo]

The solution is to wait until https://github.com/babel/babel/actions/runs/592238145 finishes and then update @babel/parser

[teodoradima]

updating @babel/eslint-parser to v7.13.4 solves this issue 🚀

[nicolo-ribaudo]

Thanks for confirming it 🚀 💛

[virbose]

class SomeClass {
state = {}
}

I had this issue last night with our CI pipeline during a release. Safe to say, not very pleasant. Instead of downgrading or updatind packages, I resolved it by rewriting the state definition to:

class SomeClass extends Component{
    constructor(props) {
        super(props);
        this.state = {};
    }
}

I hope this helps

[ashvin777]

I can also confirm that it's resolved. Thank you so much @nicolo-ribaudo for your quick help. The good thing is, it did work without any changes :). Even using babel-eslint it's working.

[nicolo-ribaudo]

Yeah, I completely reverted the PR in the ESLint case to make it sure that as many things as possible start working again 😅

[divsbhalala]

Yeah, I completely reverted the PR in the ESLint case to make it sure that as many things as possible start working again 😅

Thanks @nicolo-ribaudo

[segulino]

Hi @nicolo-ribaudo In my case this error persists even with the latest version, it's weird because another team member tries a clean install with the same repository and for him works (he uses linux, and I'm running on mac, I think that is the only difference).

I've fixed with a workaround forcing resolutions for these packages, but I know that is not a definitive solution:

Here is my yarn.lock (yarn-bug.lock) and his lock (yarn-working.lock)

yarn-locks.zip

All is working fine last week, now throws these errors on all class components with class methods.

[nicolo-ribaudo]

Those packages you put in resolutions should have nothing to do with the error you are seeing, it's only caused by @babel/parser and @babel/eslint-parser (or the old babel-eslint) 🤔