如果您想了解“SyntaxError：JSON中位置0处的意外令牌的知识，那么本篇文章将是您的不二之选。同时我们将深入剖析Angular2SyntaxError：JSON.parse()中位置0的JS
如果您想了解“ SyntaxError：JSON中位置0处的意外令牌<”的知识，那么本篇文章将是您的不二之选。同时我们将深入剖析Angular 2 SyntaxError：JSON.parse()中位置0的JSON中的意外标记<、babel watch SyntaxError：意外令牌、babel-loader jsx SyntaxError：意外令牌、babel-loader jsx SyntaxError：意外令牌[重复]的各个方面，并给出实际的案例分析，希望能帮助到您！
本文目录一览：- “ SyntaxError：JSON中位置0处的意外令牌<”
- Angular 2 SyntaxError：JSON.parse()中位置0的JSON中的意外标记<
- babel watch SyntaxError：意外令牌
- babel-loader jsx SyntaxError：意外令牌
- babel-loader jsx SyntaxError：意外令牌[重复]
“ SyntaxError：JSON中位置0处的意外令牌<”
在处理类似于Facebook的内容提要的React应用程序组件中，我遇到了一个错误：
Feed.js：94未定义的“ parsererror”“ SyntaxError：JSON中位置0处的意外令牌<
我遇到了一个类似的错误，事实证明这是render函数中HTML的错字，但这里似乎并非如此。
更令人困惑的是，我将代码回滚到了较早的已知工作版本，但仍然出现错误。
Feed.js：
import React from ''react'';var ThreadForm = React.createClass({ getInitialState: function () { return {author: '''', text: '''', included: '''', victim: '''' } }, handleAuthorChange: function (e) { this.setState({author: e.target.value}) }, handleTextChange: function (e) { this.setState({text: e.target.value}) }, handleIncludedChange: function (e) { this.setState({included: e.target.value}) }, handleVictimChange: function (e) { this.setState({victim: e.target.value}) }, handleSubmit: function (e) { e.preventDefault() var author = this.state.author.trim() var text = this.state.text.trim() var included = this.state.included.trim() var victim = this.state.victim.trim() if (!text || !author || !included || !victim) { return } this.props.onThreadSubmit({author: author, text: text, included: included, victim: victim }) this.setState({author: '''', text: '''', included: '''', victim: '''' }) }, render: function () { return ( <form className="threadForm" onSubmit={this.handleSubmit}> <input type="text" placeholder="Your name" value={this.state.author} onChange={this.handleAuthorChange} /> <input type="text" placeholder="Say something..." value={this.state.text} onChange={this.handleTextChange} /> <input type="text" placeholder="Name your victim" value={this.state.victim} onChange={this.handleVictimChange} /> <input type="text" placeholder="Who can see?" value={this.state.included} onChange={this.handleIncludedChange} /> <input type="submit" value="Post" /> </form> ) }})var ThreadsBox = React.createClass({ loadThreadsFromServer: function () { $.ajax({ url: this.props.url, dataType: ''json'', cache: false, success: function (data) { this.setState({data: data}) }.bind(this), error: function (xhr, status, err) { console.error(this.props.url, status, err.toString()) }.bind(this) }) }, handleThreadSubmit: function (thread) { var threads = this.state.data var newThreads = threads.concat([thread]) this.setState({data: newThreads}) $.ajax({ url: this.props.url, dataType: ''json'', type: ''POST'', data: thread, success: function (data) { this.setState({data: data}) }.bind(this), error: function (xhr, status, err) { this.setState({data: threads}) console.error(this.props.url, status, err.toString()) }.bind(this) }) }, getInitialState: function () { return {data: []} }, componentDidMount: function () { this.loadThreadsFromServer() setInterval(this.loadThreadsFromServer, this.props.pollInterval) }, render: function () { return ( <div className="threadsBox"> <h1>Feed</h1> <div> <ThreadForm onThreadSubmit={this.handleThreadSubmit} /> </div> </div> ) }})module.exports = ThreadsBox在Chrome开发人员工具中，错误似乎是由以下功能引起的：
loadThreadsFromServer: function loadThreadsFromServer() { $.ajax({ url: this.props.url, dataType: ''json'', cache: false, success: function (data) { this.setState({ data: data }); }.bind(this), error: function (xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); },用console.error(this.props.url, status, err.toString()下划线标出。
由于看起来错误似乎与从服务器提取JSON数据有关，因此我尝试从空白数据库开始，但错误仍然存在。该错误似乎是在无限循环中调用的，大概是由于React不断尝试连接到服务器并最终导致浏览器崩溃。
编辑：
我已经使用Chrome开发工具和Chrome REST客户端检查了服务器响应，并且数据似乎是正确的JSON。
编辑2：
看起来，尽管预期的API端点确实返回了正确的JSON数据和格式，但是React正在轮询http://localhost:3000/?_=1463499798727而不是预期的http://localhost:3001/api/threads。
我在端口3000上运行Webpack热重载服务器，而Express应用程序在端口3001上运行，以返回后端数据。令人沮丧的是，这是我上次对其进行处理时正确执行的操作，并且找不到我可能要更改的内容来破坏它。
答案1
小编典典错误消息的措词与运行时从Google Chrome浏览器得到的内容相对应JSON.parse(''<...'')。我知道您说服务器正在设置Content-Type:application/json，但是我被认为是响应 主体 实际上是HTML。
Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSONat position 0"用
console.error(this.props.url, status, err.toString())下划线标出。
该err内部实际上抛出jQuery，并传递给你作为一个变量err。带下划线的原因仅仅是因为这是您记录它的地方。
我建议您将其添加到日志记录中。查看实际的xhr（XMLHttpRequest）属性以了解有关响应的更多信息。尝试添加console.warn(xhr.responseText)，您很可能会看到正在接收的HTML。
Angular 2 SyntaxError：JSON.parse()中位置0的JSON中的意外标记<
import { Injectable } from '@angular/core';
import {Http,Response } from '@angular/http';
import { IData } from '../Common/details';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class AniversaryService {
constructor(private _http:Http) { }
getimages(): Observable<IData[]> {
return this._http.get("/api/ImageService/Details")
.map((response: Response) => <IData[]>response.json()
};
}
和相应的组件是：
import { Component,OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { IData } from '../Common/details';
import { AniversaryService } from './Aniversary.service';
@Component({
selector: 'my-AniversaryComponent',providers: [AniversaryService]
})
export class AniversaryComponent implements OnInit {
data: IData[];
constructor(private _aniversaryservice: AniversaryService) { }
ngOnInit() {
this._aniversaryservice.getimages().subscribe((details) => this.data
=details);
}
}
}
这些是网络标头和我的响应的图像(响应是在Javascript中)：
有时我的状态代码显示200 ok和内容类型(在响应标题中)：application / javascript
请帮我解决这个问题.
我在这里先向您的帮助表示感谢
解决方法
babel watch SyntaxError：意外令牌
当我使用babel观看jsx文件时。但是存在语法错误。
在此之前，我使用react-tools进行观看，一切都很好。
SyntaxError: assets/js/chat/chat.jsx: Unexpected token (258:16) 256 | if (this.props.isOpen) { 257 | return (> 258 | <div className="modal-overlay"> | ^ 259 | <ReactCSSTransitionGroup transitionName={this.props.transitionName}> 260 | <div className="chat-modal"> 261 | {this.props.children}以下是我的代码。
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;var Modal = React.createClass({ render: function() { if (this.props.isOpen) { return ( <div className="modal-overlay"> <ReactCSSTransitionGroup transitionName={this.props.transitionName}> <div className="chat-modal"> {this.props.children} </div> </ReactCSSTransitionGroup> </div> ) } else { return <div className="modal-overlay"><ReactCSSTransitionGroup transitionName={this.props.transitionName}/></div> } }});答案1
小编典典前几天我遇到了类似的问题。看来babel现在需要一些其他插件才能与react一起工作。
babel-loader jsx SyntaxError：意外令牌
我是React + Webpack的初学者。
我在Hello World Web应用程序中发现一个奇怪的错误。
我在webpack中使用babel-loader来帮助我将jsx转换为js，但是babel似乎无法理解jsx语法。
这是我的依赖项：
"devDependencies": {
"babel-core": "^6.0.14","babel-loader": "^6.0.0","webpack": "^1.12.2","webpack-dev-server": "^1.12.1"
},"dependencies": {
"react": "^0.14.1"
}
这是我的 webpack.config.js
var path = require('path');
module.exports = {
entry: ['webpack/hot/dev-server',path.resolve(__dirname,'app/main.js')],output: {
path: path.resolve(__dirname,'build'),filename: 'bundle.js'
},module: {
loaders: [
{ test: /\.js$/,exclude: /node_modules/,loader: "babel-loader"}
]
}
};
这是我的 app/main.js
var React = require("react");
React.render(<h1>hello world</h1>,document.getElementById("app"));
这是错误消息
ERROR in ./app/main.js
Module build failed: SyntaxError: ~/**/app/main.js: Unexpected token (2:13)
1 | var React = require("react");
> 2 | React.render(<h1>hello world</h1>,document.getElementById("app"));
| ^
at Parser.pp.raise (~/**/node_modules/babylon/lib/parser/location.js:24:13)
谢谢你们
![babel-loader jsx SyntaxError：意外令牌[重复]](http://www.gvkun.com/zb_users/upload/2025/03/e9b9730f-3712-402d-845c-f4b24a4fb9b11741250600954.jpg "babel-loader jsx SyntaxError：意外令牌[重复]")
babel-loader jsx SyntaxError：意外令牌[重复]
我是React + Webpack的初学者。
我在Hello World Web应用程序中发现了一个奇怪的错误。
我在webpack中使用babel-loader来帮助我将jsx转换为js，但是babel似乎无法理解jsx语法。
这是我的依赖项：
"devDependencies": { "babel-core": "^6.0.14", "babel-loader": "^6.0.0", "webpack": "^1.12.2", "webpack-dev-server": "^1.12.1"},"dependencies": { "react": "^0.14.1"}这是我的 webpack.config.js
var path = require(''path'');module.exports = { entry: [''webpack/hot/dev-server'',path.resolve(__dirname, ''app/main.js'')], output: { path: path.resolve(__dirname, ''build''), filename: ''bundle.js'' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"} ] }};这是我的 app/main.js
var React = require("react");React.render(<h1>hello world</h1>,document.getElementById("app"));这是错误消息
ERROR in ./app/main.jsModule build failed: SyntaxError: ~/**/app/main.js: Unexpected token (2:13) 1 | var React = require("react");> 2 | React.render(<h1>hello world</h1>,document.getElementById("app")); | ^at Parser.pp.raise (~/**/node_modules/babylon/lib/parser/location.js:24:13)谢谢你们
答案1
小编典典添加“ babel-preset-react”
npm install babel-preset-react并在webpack.config.js中向babel-loader添加“预设”选项
（或者您可以将其添加到您的.babelrc或package.js：http
://babeljs.io/docs/usage/babelrc/ ）
这是一个webpack.config.js示例：
{ test: /\.jsx?$/, // Match both .js and .jsx files exclude: /node_modules/, loader: "babel", query: { presets:[''react''] }}更新
不推荐使用Rule.query，而使用Rule.options。webpack 4中的用法如下：
npm install babel-loader babel-preset-react然后在您的webpack配置中（作为module.exports对象中module.rules数组中的条目）
{ test: /\.jsx?$/, exclude: /node_modules/, use: [ { loader: ''babel-loader'', options: { presets: [''react''] } } ], }今天关于“ SyntaxError：JSON中位置0处的意外令牌<”的分享就到这里，希望大家有所收获，若想了解更多关于Angular 2 SyntaxError：JSON.parse()中位置0的JSON中的意外标记<、babel watch SyntaxError：意外令牌、babel-loader jsx SyntaxError：意外令牌、babel-loader jsx SyntaxError：意外令牌[重复]等相关知识，可以在本站进行查询。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
