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
[email protected] /var/www/html/todo-list
└─good@good:┬ [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  └─┬ [email protected]

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"
  }
}

Can you show the rest of the TodoBox.js code?

rrd
– rrd

2017-10-26 11:17:07 +00:00
Commented Oct 26, 2017 at 11:17 — rrd
– rrd, Commented Oct 26, 2017 at 11:17

Flying · Accepted Answer · 2017-10-26 11:31:55Z

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"
        ]
    }
}

edited Oct 26, 2017 at 11:31

answered Oct 26, 2017 at 11:18

Flying

4,5802 gold badges21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rafael Hernández Over a year ago

i have "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" },

Rafael Hernández Over a year ago

but i dont find the .babelrc file

Flying Over a year ago

.babelrc file is optional, you can have "babel" section inside package.json instead. Take a look if you have this section, that you have "presets" list inside it and that you have react preset into this list.

Rafael Hernández Over a year ago

i just edit the post with package.json i have presets of babel

Flying Over a year ago

@RafaelHernández you have installed presets, but you didn't use them. I will update answer now

|

Collectives™ on Stack Overflow

failed to compile syntax error: unexpected token in reactjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related