Parsing error: Unexpected token const

Question

I am currently setting up a meteor application and I am using eslint and babel, but I get the following error for the following code snippet:

const Navigation = props => (
  const classes = props.classes;

  return (
    <div className={classes.root}>
    </div>
  )
);

Error:

2:4 - Parsing error: Unexpected token const

I have recreated my eslint config here. My .babelrc config is the following:

{
  "presets": ["env", "react"]
}

Answer 1

It's because you are using the concise body of an arrow function and that expects the expression inside () and not a statement. To use a statement you need to use block body by using {} instead of ().

Like this:

const Navigation = props => {
  const classes = props.classes;

  return (
    <div className={classes.root}>
    </div>
  )
};

As per MDN Doc:

Arrow functions can have either a "concise body" or the usual "block body".

In a concise body, only an expression is needed, and an implicit return is attached. In a block body, you must use an explicit return statement.