タケユー・ウェブ日報

Ruby on Rails や Flutter といったWeb・モバイルアプリ技術を武器にお客様のビジネス立ち上げを支援する、タケユー・ウェブ株式会社の技術ブログです。

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