2016-06-15 10 views
0

cycle.jsとwebpackを試しています。私はcycle.jsのドキュメントで見つけたもののほぼコピーを次のindex.jsというファイルにしました。CycleJsアプリで「React is undefined」エラーが発生しました

import Cycle from '@cycle/core'; 
import {makeDOMDriver, hJSX} from '@cycle/dom'; 

function main(drivers) { 
    return { 
    DOM: drivers.DOM.select('input').events('click') 
     .map(ev => ev.target.checked) 
     .startWith(false) 
     .map(toggled => 
     <div> 
      <input type="checkbox" /> Toggle me 
      <p>{toggled ? 'ON' : 'off'}</p> 
     </div> 
    ) 
    }; 
} 

const drivers = { 
    DOM: makeDOMDriver('#app') 
}; 

Cycle.run(main, drivers); 

そして、ここで私がbundle.jsdist内部のフォルダを生成するのWebPACKを使用しています私のindex.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Cycle.js checkbox</title> 
    </head> 
    <body> 
    <div id="app"></div> <!-- Our container --> 

    <script src="./dist/bundle.js"></script> 
    </body> 
</html> 

です。私はクロームでindex.htmlを開くことによって、アプリケーションを実行すると、私は

cycle.js:51ReferenceError: React is not defined 
    at index.js:10 
    at tryCatcher (rx.all.js:63) 
    at InnerObserver.next (rx.all.js:5598) 
    at InnerObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (rx.all.js:1762) 
    at InnerObserver.tryCatcher (rx.all.js:63) 
    at AutoDetachObserverPrototype.next (rx.all.js:11810) 
    at AutoDetachObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (rx.all.js:1762) 
    at ConcatObserver.next (rx.all.js:3466) 
    at ConcatObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (rx.all.js:1762) 
    at ConcatObserver.tryCatcher (rx.all.js:63) 

ない私はcycle.jsアプリで、この一見単純な最初のステップで間違ってやっているかわからクロームコンソールで次のエラーを取得します。

+0

/** @jsx hJSX */ 

またはあなたのバベルの設定でこれを置く:

あなたの.jsファイルの先頭に正しいプラグマを追加することができます'React.DOM(etc'など)。 – m59

答えて

1

JSXの正しいプラグマを設定する必要があります。そうしないと、JSXが正しく変形されません。あなたのJSXはに変換されている

[ "transform-react-jsx", { "pragma": "hJSX" } ] 

Relevant GitHub thread.

関連する問題