我四处搜索并尝试了所有可能的解决方案，但没有运气修复此错误。我猜这个bug与我的webpack.config.js / transforming reactjs文件有些关系？我使用express serverside和reactjs / jade clientside
当我运行webpack时，我收到此错误
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
webpack.config.js
var LiveReloadPlugin = require('webpack-livereload-plugin');
var path = require('path');
var webpack = require('webpack');
module.exports={
//Entry point/Location of the main jsx file to be transformed to JS
entry: "./src/js/main.jsx",
//Location where the compiled JS code will be saved
output: {
//Location where the output file is to be saved
path: './build',
//Name of the output file
filename: "bundle.js"
},
//Modules
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {presets:[ 'es2015', 'react', 'stage-0' ]}
},
]
},
plugins: [
new LiveReloadPlugin()
],
//Resolves using extensions and absolute path
resolve:
extensions = ['', '.js']
};
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"));
header.jsx
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;
我的package.json看起来像这样......
{
"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"
}
}
过去24小时我一直在和这个虫子作斗争，没有运气。如果有人能提供帮助，我们将不胜感激