2017-02-22 60 views
2

我在Adobe體驗管理器(AEM)中使用反應js我收到控制檯錯誤。這裏是我的代碼:我正在在AEM中反應js

"Uncaught SyntaxError: Unexpected token import"

還我收到錯誤附近

'<' "Unexpected token error"

是否有人可以幫助?

import React from "react"; 

import {Header} from "./Header"; 

export class Root extends React.Component { 
    render() { 
     return (
      <div className="container"> 
       <div className="row"> 
        <div className="col-xs-10 col-xs-offset-1"> 
         <Header /> 
        </div> 
       </div> 
       <hr/> 
       <div className="row"> 
        <div className="col-xs-10 col-xs-offset-1"> 
         {this.props.children} 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 
+1

您是否通過AEM附帶的YUI壓縮器來縮小您的代碼?在過去,我有過不好的經歷。 – mickleroy

+0

您的第一個錯誤「Uncaught SyntaxError:Unexpected token import」意味着react.js不能正確編譯jsx。另外,第二個錯誤提示像縮小器這樣的東西正在嘗試處理jsx。 –

+0

您可以添加一些細節,涉及代碼庫中的代碼是如何到達生成的網站以及在何處/何時發生此錯誤? –

回答

0

我們能夠通過始終在每個組件中包含webpack配置文件來使用反應組件。每個反應組件然後在我們的構建管道中被轉譯爲es5。 AEM Clientlibs在渲染時使用轉譯後的javascript進行編譯。

+0

你能分享一個示例組件嗎? –

+0

我不確定如何構建webpack.config.js文件以構建反應組件文件。我可以製作一個大的bundle.js: ''' – SaSConsul