反應Browserify巴貝爾 - 意外的令牌錯誤

我試圖通過命令行使用browserify捆綁我的依賴項。該命令完成沒有錯誤 - 從我可以告訴，但加載頁面結果在'意外的令牌<'錯誤。反應Browserify巴貝爾 - 意外的令牌錯誤

下面是我使用的命令：

browserify -t [ babelify --presets [ es2015 react ] ] main.js -o bundle.js

main.js

'use strict'; 
var React = require('react'); 
var ReactDom = require('react-dom'); 
var $ = require('jQuery');

JSX：

'use strict'; 

var React = require('react'); 
var ReactDom = require('react-dom'); 
var $ = require('jQuery'); 

class SideNav extends React.Component{ 
constructor(props) { 
    super(props); 
    this.state = {items: new Array()}; 

} 
componentDidMount() { 
    $.ajax({ 
     url:"/json/sidenav.json", 
     dataType: "json", 
     cache: false, 
     success: function(data) { 
      this.setState({items: data}); 
     }.bind(this) 
    }); 
} 
render() { 
    var items = []; 
    this.state.items.forEach((item) => { 
     items.push(<NavItem title={item.title} link={item.link} active={item.active} />); 
    }); 
    return (
     <ul className="nav nav-sidebar"> 
     {items} 
     </ul> 
    ); 
    } 

} 
class NavItem extends React.Component{ 
    render() { 
     var clazz = this.props.active ? 'active' : ''; 
     var link = this.props.active ? 
       <a href="#">{this.props.title} <span className="sr-only">(current)</span></a> : 
       <a href={this.props.link}>{this.props.title}</a> 
     return (
      <li className={clazz}>{link}</li> 
     ); 
    } 
} 

ReactDOM.render(
    <SideNav/>, 
    document.getElementById('sidenav') 
);

來源

2016-11-17 Matt Sloan

我看起來像jsx的babel轉換沒有踢入。嘗試在bundle.js中搜索' ArneHugo

否 - NavItem不在bundle.js –

啊，當然，它已經被醜化了。嘗試在bundle.js中搜索'<'並查看它是否在任何類似JSX語法的地方使用。 – ArneHugo

巨大的感謝ArneHugo！他意識到我在我的.hmtl中加入了JSX，這意味着它沒有被轉換。將它移動到main.js，然後修復一個錯字，解決了這個問題。

來源

2016-11-17 17:02:14

反應Browserify巴貝爾 - 意外的令牌錯誤

回答

相關問題