元フリーエンジニアライフ

Ruby on Rails とか MovableType とかAWSやってるフリーランスウェブエンジニアの記録でした。現在は法人成りしてIT社長。

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で対象のスクリプトは変更できます。