ESLint in React: Parsing error: Unexpected token =

Question

I'm getting this error:

error Generating development JavaScript bundle failed 92:7 error

Parsing error: Unexpected token =

I am using gatsby & a custom eslintrc:

{
    "parser": "babel-eslint", // uses babel-eslint transforms
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 2020,
        "ecmaFeatures": {
          "jsx": true,
          "modules": true
        }
      },
    "settings": {
      "react": {
        "version": "detect" // detect react version
      }
    },
    "env": {
      "node": true, // defines things like process.env when generating through node
      "browser": true,
      "es6": true
    },
    "extends": [
      "eslint:recommended", // use recommended configs
      "plugin:react/recommended"
    ]
  }

I found solutions to this problem in several places, but none of it worked. The most common solution I found was "parser": "babel-eslint" to the eslintrc file. But I already have that. Don't know what I can try anymore.

The files this error occurs in are usually files written in an older style React, but I don't know why they shouldn't work anymore?

For example:

class Post extends Component {
  constructor(props) {
    super(props)

    this.state = {
      isVisible: true,
      isOpen: false,
    }

    this.toggleIsVisible = this.toggleIsVisible.bind(this)
    this.toggleModal = this.toggleModal.bind(this)
  }

  toggleIsVisible = () => {    <=== HERE ESLINT COMPLAINS ABOUT THE FIRST, DEFINING EQUALS-SIGN
    this.setState({ isVisible: !this.state.isVisible })
  }

Another piece of code eslint doesn't like is this, in a different file:

      try {
        await Function(values)
      } catch { <==== ESLINT DOESNT LIKE THIS OPEN BRACKET, SIMILAR ERROR MESSAGE: "Unexpected token {"
        setFormState('error')
      }

I have also tried disabling the line in eslint as well as the full file, but didn't work either. Oh, and when I chuck eslint out completely, everything works fine and I can run as well as build my project.

have you installed `babel-eslint` besides declaring it? fwiw you don't need to bind your function if you declare you method with arrow function. — buzatto, Feb 01 '21 at 14:05
@goto1 It's a stage 3 experimental feature called [public class fields](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields). I wonder if you need to include one of babel's presets or `@babel/plugin-proposal-class-properties ` — cbr, Feb 01 '21 at 14:05
`babel-eslint` seems to have been deprecated in favor of [`@babel/eslint-parser`](https://www.npmjs.com/package/@babel/eslint-parser) - could try that one? — cbr, Feb 01 '21 at 14:07
I tried that one too! Didn't work, so I went back to `babel-eslint`, to be safe. :-/ — antonwilhelm, Feb 01 '21 at 14:07
Hmm, [`@babel/eslint-plugin`](https://www.npmjs.com/package/@babel/eslint-plugin) supposedly might help overwrite some problematic rules e.g. `@babel/semi` instead of eslint's `semi` for class properties. — cbr, Feb 01 '21 at 14:10

ESLint in React: Parsing error: Unexpected token =

0 Answers0