无法编译语法错误：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.

我有这个错误，我用 npm install -g create-react-app 创建了项目 假设 create-react-app 构建项目，所有依赖项为 webpack 和 babel。我在其他帖子中看到错误语法的问题是针对 babel 的，不是吗？我已经安装了这个版本的 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 

tod​​obox.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

Babel 好像看不懂 JSX 语法。

检查您是否安装了 babel-preset-react 软件包，并且您已将 react 添加到预设列表中，或者添加到 package.json 内的 {"babel":{"presets":[]}} 列表中，或者添加到 .babelrc 文件中。

您的 babel 预设配置应如下所示（在 package.json 的情况下，我已删除不相关的行）：

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