CODEWITHSUNDEEP
javascriptreactjssonarqubesonarqube-scan
akshat gupta
akshat gupta

Reputation: 74

Unexpected token = (with espree parser in module mode) in my react project using sonar-scanner

I am facing this error while using sonar-scanner. It is unable to parse all those files in which i have used arrow functions.

import React from "react";
import { Button } from "antd";
import history from "src/components/history";

class BackButton extends React.Component {
  handleClick = () => {
    history.goBack();
    if (this.props.onBack) {
      this.props.onBack();
    }
  };
  render() {
    return <Button icon="arrow-left" onClick={this.handleClick} />;
  }
}

export default BackButton;

The error at line 6. Need a solution to fix this.

Upvotes: 1

Views: 1101

Answers (2)

henok
henok

Reputation: 894

in order to use arrow functions inside a class you need to enable this plugin in your babel configuration.

{
  "plugins": [
    "transform-class-properties"
  ]
}

or you can do it like this

class BackButton extends React.Component {
  constructor() {
    super();
    this.handleClick = (val) => {
      ...
    };
    …
  }
}

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1073968

I suspect the problem isn't arrow functions, it's class fields. Your handleClick is a class field (basically a property declaration) using an arrow function as its initializer. The class fields proposal is mature, but still at Stage 3, not actually in the spec yet (not even ES2020). In contrast, arrow functions have been in the language for over five years.

You'll need to be sure to enable support for class fields.

Upvotes: 1

Related Questions