Javascript 网页包语法错误?
我已经到处搜索并尝试了所有可能的解决方案,但没有运气修复这个错误。我猜这个bug与我的webpack.config.js/转换reactjs文件有关?我使用express服务器端和reactjs/jade客户端 当我运行webpack时,我得到了这个错误Javascript 网页包语法错误?,javascript,node.js,reactjs,webpack,babeljs,Javascript,Node.js,Reactjs,Webpack,Babeljs,我已经到处搜索并尝试了所有可能的解决方案,但没有运气修复这个错误。我猜这个bug与我的webpack.config.js/转换reactjs文件有关?我使用express服务器端和reactjs/jade客户端 当我运行webpack时,我得到了这个错误 ERROR in ./src/js/components/header.jsx Module build failed: SyntaxError: /home/hakeem/Documents/webapp/app/src/js/com
ERROR in ./src/js/components/header.jsx
Module build failed: SyntaxError: /home/hakeem/Documents/webapp/app/src/js/components/header.jsx: Unexpected token (46:39)
44 | return (
45 | <div className="col-lg-12">
> 46 | <li className='pull-left'><Link to "app">Home</Link></a></li>
| ^
47 | <li className="pull-left"><a onClick={this.handleClick}>Notifications</a></li>
48 | <li className="pull-left"><a onClick={this.handleClick}>Find friends</a></li>
49 | <input id="site-search" type="text" onChange={this.handleChange} value={this.setState.typed} placeholder="search..." aria-label="..." className="col-lg-2 pull-right"/>
at Parser.pp.raise (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.unexpected (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/parser/util.js:91:8)
at Parser.pp.jsxParseIdentifier (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:214:10)
at Parser.pp.jsxParseNamespacedName (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:225:19)
at Parser.pp.jsxParseAttribute (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:307:20)
at Parser.pp.jsxParseOpeningElementAt (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:319:31)
at Parser.pp.jsxParseElementAt (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:341:29)
at Parser.pp.jsxParseElementAt (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:354:30)
at Parser.pp.jsxParseElementAt (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:354:30)
at Parser.pp.jsxParseElement (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:390:15)
at Parser.parseExprAtom (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:402:21)
at Parser.pp.parseExprSubscripts (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/parser/expression.js:265:19)
at Parser.pp.parseMaybeUnary (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/parser/expression.js:245:19)
at Parser.pp.parseExprOps (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/parser/expression.js:176:19)
at Parser.pp.parseMaybeConditional (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/parser/expression.js:158:19)
at Parser.pp.parseMaybeAssign (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/parser/expression.js:121:19)
at Parser.pp.parseParenAndDistinguishExpression (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/parser/expression.js:583:26)
at Parser.<anonymous> (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/flow.js:1000:26)
at Parser.<anonymous> (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/flow.js:1000:26)
at Parser.<anonymous> (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/flow.js:1000:26)
at Parser.parseParenAndDistinguishExpression (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/flow.js:1000:26)
at Parser.pp.parseExprAtom (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/parser/expression.js:469:19)
at Parser.<anonymous> (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:404:22)
at Parser.<anonymous> (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:404:22)
at Parser.<anonymous> (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:404:22)
at Parser.<anonymous> (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:404:22)
at Parser.parseExprAtom (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/plugins/jsx/index.js:404:22)
at Parser.pp.parseExprSubscripts (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/parser/expression.js:265:19)
at Parser.pp.parseMaybeUnary (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/parser/expression.js:245:19)
at Parser.pp.parseExprOps (/home/hakeem/Documents/webapp/app/node_modules/babylon/lib/parser/expression.js:176:19)
@ ./src/js/main.jsx 17:13-47
main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
//Leftbar
var Leftbar = require('./components/leftbar');
//Header
var Header = require('./components/header');
//Sidebar
var Leftbar = require('./components/leftbar');
//Posts
var Posts = require('./components/posts');
//Rightbar
var Rightbar = require('./components/rightbar');
var App = React.createClass({
render() {
return(
<div>
<Leftbar />
<aside id="maincontent" className="col-lg-10">
<Header />
<main>
<div id="main-container" className="col-lg-10 row grid">
<h3 id="page-title">News Feed</h3>
<Posts className="pull-left col-lg-10" postimgsrc="http://tedxtargumures.com/wp-content/themes/TEDxTheme-develop/images/defaults/video-placeholder.jpg" imgsrc="https://upload.wikimedia.org/wikipedia/en/7/70/Shawn_Tok_Profile.jpg" name="Hakeem" textcontent="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat tellus ac magna imperdiet, ut gravida orci commodo. Curabitur sagittis dui velit, vel vehicula erat aliquet sed. Vestibulum pharetra tortor in velit iaculis placerat. Vestibulum sed rutrum tortor. Vivamus finibus libero nisl, nec fermentum justo vestibulum a. Morbi sed ante ullamcorper, luctus nulla nec, convallis justo. Etiam tortor metus, porttitor eu fringilla nec, tempor ut mauris. Donec lacinia arcu at tellus sollicitudin, vel dictum eros vulputate. Nam eu arcu ut purus volutpat condimentum quis vel arcu."/>
</div>
<Rightbar />
</main>
</aside>
</div>
);
}
});
ReactDOM.render(<App />, document.getElementById("page"));
在过去的24小时里,我一直在与这个错误作斗争,但运气不好。如果有人能提供帮助,我们将非常感激使用双引号而不是单引号。如您所见,箭头指向引号。而且,
Home
看起来无效。似乎您缺少一个=
.Omg。非常感谢。在这一点上,我不确定我是应该为自己感到高兴还是生气,因为我真的盯着它看了一天,但仍然没有注意到这一点。总是简单的事情让我抓狂。用一根短绒尽早发现这些问题!为什么在
标签后面有一个
?@FelixKling你能把它作为一个答案,这样我们就可以结束这个问题了吗?
import React from 'react';
import ReactDOM from 'react-dom';
//Leftbar
var Leftbar = require('./components/leftbar');
//Header
var Header = require('./components/header');
//Sidebar
var Leftbar = require('./components/leftbar');
//Posts
var Posts = require('./components/posts');
//Rightbar
var Rightbar = require('./components/rightbar');
var App = React.createClass({
render() {
return(
<div>
<Leftbar />
<aside id="maincontent" className="col-lg-10">
<Header />
<main>
<div id="main-container" className="col-lg-10 row grid">
<h3 id="page-title">News Feed</h3>
<Posts className="pull-left col-lg-10" postimgsrc="http://tedxtargumures.com/wp-content/themes/TEDxTheme-develop/images/defaults/video-placeholder.jpg" imgsrc="https://upload.wikimedia.org/wikipedia/en/7/70/Shawn_Tok_Profile.jpg" name="Hakeem" textcontent="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat tellus ac magna imperdiet, ut gravida orci commodo. Curabitur sagittis dui velit, vel vehicula erat aliquet sed. Vestibulum pharetra tortor in velit iaculis placerat. Vestibulum sed rutrum tortor. Vivamus finibus libero nisl, nec fermentum justo vestibulum a. Morbi sed ante ullamcorper, luctus nulla nec, convallis justo. Etiam tortor metus, porttitor eu fringilla nec, tempor ut mauris. Donec lacinia arcu at tellus sollicitudin, vel dictum eros vulputate. Nam eu arcu ut purus volutpat condimentum quis vel arcu."/>
</div>
<Rightbar />
</main>
</aside>
</div>
);
}
});
ReactDOM.render(<App />, document.getElementById("page"));
import React from 'react';
import Router from 'react-router';
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';
let navigationActionCreators = require('../actions/navigation-action-creators.jsx');
let header = React.createClass({
getInitialState: function () {
return{typed: ''};
},
//Event that gets fired when user enters text
handleChange: function(event) {
this.setState({typed: event.target.value});
//Search page to be rendered
var SearchPage = React.createClass({
render: function() {
return <div>You typed:{this.state.typed}</div>
}
});
//Render search page in real time as user enters input
ReactDOM.render(<p>You searched for<h3>{this.state.typed}</h3></p>, document.getElementById("main-container"));
},
//Event that gets fired when navigation item is clicked
handleClick: function() {
navigationActionCreators.navigateTo({
component:componentname
});
var Page = React.createClass({
render: function() {
return (
<div>
Page
</div>
);
}
});
ReactDOM.render(<Page/>, document.getElementById("main-container"));
},
render:function() {
return (
<div className="col-lg-12">
<li className='pull-left'><Link to "app">Home</Link></a></li>
<li className="pull-left"><a onClick={this.handleClick}>Notifications</a></li>
<li className="pull-left"><a onClick={this.handleClick}>Find friends</a></li>
<input id="site-search" type="text" onChange={this.handleChange} value={this.setState.typed} placeholder="search..." aria-label="..." className="col-lg-2 pull-right"/>
<RouteHandler/>
</div>
);
}
});
let routes = (
<Route name="app" path="/" handler={App}>
<Route name="login" path="/login" handler={LoginHandler}/>
</Route>
)
Router.run(routes, function(Handler){
React.render(<Handler/>, document.body);
});
module.exports = header;
{
"name": "app",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"morgan": "~1.6.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"serve-favicon": "~2.3.0"
},
"devDependencies": {
"alt": "^0.18.1",
"babel-core": "^6.3.21",
"babel-loader": "^6.2.0",
"babel-plugin-react-transform": "^1.1.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"browser-sync-webpack-plugin": "^1.0.1",
"flux": "^2.1.1",
"jsx-loader": "^0.13.2",
"react": "^0.14.3",
"react-transform-hmr": "^1.0.1",
"webpack": "^1.12.9",
"webpack-livereload-plugin": "^0.4.0"
}
}