Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/382.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/42.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 网页包语法错误?_Javascript_Node.js_Reactjs_Webpack_Babeljs - Fatal编程技术网

Javascript 网页包语法错误?

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

我已经到处搜索并尝试了所有可能的解决方案,但没有运气修复这个错误。我猜这个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/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"
  }
}