[SOLVED] Unexpected token, expected "," when trying to use react rendering

Unexpected token, expected "," when trying to use react rendering

The code I had used to work, but after doing a lot of major updates to packages I have been working through some errors. The one that has me stuck right now is the following:

renderDateTextField = (props: TextFieldProps) => {
    return (<TextField
      className={`${styles.datesContainer}  ${styles.textfield}`}
      onClick={props.onClick}
      value={props.value}
      {...props}
    />);
};

Here is the error message:

ERROR in ./src/components/Desk/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /var/www/FlaskApp/people-app-prod/static/src/components/Desk/index.js: Unexpected token, expected "," (604:32)

  602 |     };
  603 | 
> 604 |     renderDateTextField = (props: TextFieldProps) => {
      |                                 ^
  605 |         return (<TextField
  606 |           className={`${styles.datesContainer}  ${styles.textfield}`}
  607 |           onClick={props.onClick}

I am personally not as familiar with this code/react and am a new developer on this project trying to get things updated. It's unclear what the problem was here and why it is being triggered when building now, but older versions of the packages did not have issues.

Edit:

Previously in babel I the es2015 preset was being used, this has now been changed to @babel/preset-env as suggested on the babel page since es2015 is deprecated: https://babeljs.io/docs/en/babel-preset-es2015 . I am wondering if this is related to the problem.

Solution

It looks like that code is using the Flow typing system. I would check to see that Flow is properly configured.