react-rails のprerender(サーバサイドレンダリング)のとき、コンポーネント中で他のJavaScriptライブラリを使う

僕はjs-routesをよく使うのですが、Reactコンポーネント内で、Routes.hoge_url(this.props.id)とかやってると、そのままではサーバサイドレンダリングするときにこけます。

render_component 'EntryListItem', 
                 { entry: entry.to_jbuilder.attributes! }, 
                 prerender: true

var EntryListItem = React.createClass({
    propTypes: {
        entry: React.PropTypes.object.isRequired
    },

    render: function () {
        var entryPath = Routes.entry_path(this.props.entry.id);
        // 省略
    }
});

github.com

github.com

対処方法

app/javascripts/components.jsで必要なライブラリをrequireするようにします。

//= require js-routes
//= require_tree ./components

app/javascripts/application.coffeeの方に重複していても実際に重複して読み込まれるわけではないので、それについては気にしなくてよいです。

個人的にはcomponents以外でも使っているものについてはcomponentsの外でもrequireしておいたほうがわかりやすいと思っています。

#= require jquery
#= require jquery_ujs
#= require react
#= require react_ujs
#= require js-routes
#= require components
#= require_directory .
#= require_self

'use strict'

以上です。

なお components.js

https://github.com/reactjs/react-rails にあるように、initializerで対象のスクリプトは変更できます。