failed to compile syntax error: unexpected token in reactjs

Question

Failed to compile

./src/components/TodoBox.js
Syntax error: Unexpected token (16:6)

  14 |       e.preventDefault();
  15 |     }
> 16 |       <div className="TodoBox">
     |       ^
  17 |         <form onSubmit={this.onSubmit }>
  18 |           <input
  19 |             type="text" value={this.state.todoText}

This error occurred during the build time and cannot be dismissed.

I have this error, i created the project with npm install -g create-react-app it is assumed that create-react-app build the project with all dependences as webpack and babel. i see in others post that the problem with the error syntax is for babel, no? I have installed this version of babel

/var/www/html/todo-list$ sudo  npm install --save-dev babel-cli
todo-list@0.1.0 /var/www/html/todo-list
└─good@good:┬ babel-cli@6.26.0 
  ├── babel-core@6.26.0 
  ├─┬ babel-polyfill@6.26.0 
  │ ├── core-js@2.5.1 
  │ └── regenerator-runtime@0.10.5 
  ├── fs-readdir-recursive@1.0.0 
  ├── output-file-sync@1.1.2 
  ├── source-map@0.5.7 
  └─┬ v8flags@2.1.1 

todobox.js

import React, { Component } from 'react';
import '../styles/TodoBox.css';

class TodoBox extends Component {
  constructor() {
    super();
      this.state = {
        todoText: ''
      }
    }
    onSubmit(e){
      console.log(e);
      e.preventDefault();
    }
    render() {
      return (    
      <div className="TodoBox">
        <form onSubmit={this.onSubmit }>
          <input
            type="text" value={this.state.todoText}
            onChange={(e) => {this.setState({todoText: e.target.value})}}/>
            <input type="submit" value="Agregar"/>
        </form>
      </div>
    );
  }
}

export default TodoBox;

package.json

{
  "name": "todo-list",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0"
  }
}

Answer 1

Looks like Babel can't understand JSX syntax.

Check if you have babel-preset-react package installed and that you have react added into list of presets either into {"babel":{"presets":[]}} list inside package.json or into .babelrc file.

Your babel presets configuration should look like (in a case of package.json, I've removed irrelevant lines):

{
    "devDependencies": {
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1"
    },
    "babel": {
        "presets": [
            "es2015",
            "react"
        ]
    }
}