Unable to use esprima with ReactJS - Unexpected token

Question

I am trying to parse a functions parameters with esprima in react js. I am getting following error

Error: Line 1: Unexpected token ( ▶ 9 stack frames were collapsed. App.render src/v4/EsprimaTest.js:12:29 9 | 10 | 11 | render() {

12 | const parsed= esprimaFB.parse(this.sum.toString()) | ^ 13 | const parsed1= esprima.parse(this.sum.toString()) 14 | return ( 15 | View compiled

My source code is as follow. I tried both esprima and esprima-fb

import React from "react";
var  esprimaFB = require("esprima-fb");
var  esprima = require("esprima");

class App extends React.Component {
  sum = (a,b)=>{
    return a+b;
}


  render() {
    const  parsed= esprimaFB.parse(this.sum.toString())
    const  parsed1= esprima.parse(this.sum.toString())
    return (
    <div>
      <div>{JSON.stringify(parsed)}</div>
      <div>{JSON.stringify(parsed1)}</div>
    </div>
    );
  }
}
export default App;

Answer 1

I am able to solve the problem by moving sum function outside the class. But does not know why it did not run when it was in class scope.

import React from "react";
var  esprimaFB = require("esprima-fb");
var  esprima = require("esprima");

 const sum = (a,b)=>{
    return a+b;
}
class App extends React.Component {



  render() {

    const  parsed= esprima.parse(sum.toString())
    return (
    <div>
      <div>{JSON.stringify(parsed)}</div>

    </div>
    );
  }
}
export default App;

Answer 2

When you use sum inside the class, you have an arrow function.

Try to change:

esprimaFB.parse(this.sum.toString())

To:

esprimaFB.parse(this.sum().toString())

I don't know if the error you were getting was related to this, give it a try.