jsxが正しく表示されないようです。

Question

Rails（4.2.7）プロジェクトでreact-rails gemを使用しています。

gem 'react-rails' 

私はES6の構文を使用して.jsxのファイルにコンポーネントを定義した：

これは正常に動作します

class Foo extends React.Component { 
    render() { 
    return (<h1>hello</h1>) 
    } 
} 

が、私はこれは私が私のデフォルトGemfileに加えた唯一の変更です

import ReactTransitionGroup from 'react-addons-transition-group' 
class Foo extends React.Component { 
    render() { 
    return (<h1>hello</h1>) 
    } 
} 

foo.es6.self-69f3a42….js?body=1:11 Uncaught ReferenceError: require is not defined

私がJSX correctl transpilingていないよ場合ように私には思える：JSモジュールをインポートしようと、私はエラーを取得します最初のケースではエラーが発生しますが、そうではありません。私はimportを使用しようとするまで、問題なく終日jsxを使用してきました。

私は私のGemfileに以下を追加しようとした

：

gem 'sprockets-es6' 
gem 'babel-transpiler' 

私は設定/環境/ development.rbにこれを追加しようとしました：

config.react.jsx_transformer_class = React::JSX::BabelTransformer 

そして、私が作成しようとしましたレールを使用するコンポーネントは-es6フラグを使用してコンポーネントを生成します。

rails g react:component Foo --es6 

何が欠けていますか？

Answer 1

は、だからここに私は私の問題を解決する方法は次のとおりです。私は「反応し、Railsの宝石を使用しているため、アドオンは、設定オプションを経由して利用可能です - 私は、設定/ application.rbに以下を追加しました：

config.react.addons = true 

、なぜ importステートメントtranspiles私はまだ理解していない

var ReactTransitionGroup = React.addons.ReactTransitionGroup 

、多分いつかは以下となります。

その後、私の.jsxのファイルの代わりに、importで、これは私がReactTransitionGroupへのアクセス権を持っているために使用される構文は次のとおりです〜requireにhは定義されておらず、requireを定義するか、定義されたものに変換する以外の方法で修正することができます。