[英]failed to compile syntax error: unexpected token in reactjs
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. 我有这个错误,我用npm install -g create-react-app创建了项目,假设create-react-app构建了所有依赖项,如webpack和babel。 i see in others post that the problem with the error syntax is for babel, no?
我在其他人的帖子中看到错误语法的问题是针对通天塔的,不是吗? I have installed this version of 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
todobox.js 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 的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"
}
}
Looks like Babel can't understand JSX syntax. 看来Babel无法理解JSX语法。
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. 检查是否已安装
babel-preset-react
软件包,以及是否已将react
添加到package.json
内的{"babel":{"presets":[]}}
.babelrc
{"babel":{"presets":[]}}
列表或.babelrc
文件中的{"babel":{"presets":[]}}
列表中。
Your babel presets configuration should look like (in a case of package.json
, I've removed irrelevant lines): 您的babel预设配置应如下所示(对于
package.json
,我已删除了无关的行):
{
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.