react-rails + webpack + ES6 におけるサーバーサイドレンダリングについて

Question

Ruby on RailsでReact.jsを使用するため、react-railsのgemを用いて開発をしています。
また、JavaScriptでES6（ES2015）を使用するためにwebpackを使用しています。
webpackの設定は以下のとおりです。

// webpack.config.js
module.exports = {
  entry: {
    hello_world: __dirname + '/src/hello_world/components/hello_world.jsx',
  },
  output: {
    path: __dirname + '/../app/assets/javascripts/components',
    filename: '[name].js'
  },
  module: {
    loaders: [
      { 
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ["es2015", "react"],
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
};

##発生するエラーについて
react-railsにはサーバーサイドレンダリング（SSR）のための機能があり、
以下のように、prerender: true を react_component メソッドで
指定することによりSSRが可能になります。

<!-- index.html.erb -->
<%= react_component('HelloWorld', {}, { prerender: true }) %>

React側のコードは以下のとおりです。

// hello_world.jsx
import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
      </div>
    );
  }
}

しかし、これを実行すると以下のようなエラーが発生してしまいます。

React::ServerRendering::PrerenderError

Encountered error "#<ExecJS::ProgramError: ReferenceError: HelloWorld is not defined>" when prerendering HelloWorld with {}
eval (eval at module.exports ((execjs):20743:19), <anonymous>:1:1)
Object.module.exports [as getConstructor] ((execjs):20743:19)
Object.serverRender ((execjs):20934:31)
...

このエラーが発生する原因は把握しており、
react-railsではSSRを実行するためにExecJSを使用しているのですが、
ExecJSは module.exports や require に対応していないためエラーが発生するようです。

babelでのトランスパイル時に module.exports や require が発生しないように
しようかと思いましたが、良い方法が見つかりませんでした。
もし、解決方法がわかる方がいらっしゃいましたら、教えていただけると幸いです。

Answer 1

僕の記憶違いだと申し訳ないんですが、react-railsでSSRできる条件は以下が必要だった気がします。

1.app/assets/javascripts/components.js 内に記述してあるjsをSSR時に読み込みhtmlにして返す
2.SSRしたいコンポーネントはwindowオブジェクトに登録されている必要がある

以前僕が書いたreact-rails用のメモですがよろしかったら見てください！
react+rails+サーバーサイドレンダリングで開発してますよメモ①

Comments

[gesorein]

ご回答ありがとうございます！
すみません、質問内容では省略していましたが、
app/assets/javascripts/components.jsは作成しており、以下のように記述しています。

//= require_tree ./components

以前、hello_world.jsxのファイル末尾に 「window.HelloWorld = HelloWorld;」を
記述していたのですが、「ReferenceError: window is not defined」という
エラーが発生していたので、記述を削除しておりました。やはり必要なのですね。
どちらにせよwindowオブジェクトに登録しても、エラーでうまくいかないようです。

記事を拝見したところ「webpackを使用してES5形式まで落としている」と
記載されているのですが、webpackでなにか追加の設定が必要なのでしょうか？
ご教示いただけると幸いです。よろしくお願いいたします。

[MasakazuFukami]

すいません僕が使用していたときと色々変わっていました。

公式のリファレンスに書いてありますが、
```
Your code can't reference document or window. Prerender processes don't have access to document or window, so jQuery and some other libs won't work in this environment :(
```

とりあえずprerender: trueの中ではwindowは参照できないですね。

また、ES6ままでよければ
/app/assets/javascripts/componentの中に

```js
window.HelloWorld = React.createClass({
render: function() {
return <h1>hello world</h1>
}
})

// or

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

の用な感じでそのまま入れて良いっぽいです。
つまり、グローバル変数にcreateClassしたものを入れるかES2015のまま入れる感じですね。

んーこれ結構闇がふかそうだなぁと思っていて、
ES2015のままだとprerenderできるけどブラウザが対応してないことがある
ES5まで落とすとグローバル参照する方法がwindowしかないのに、execJSの中ではwindowオブジェクトはもちろんない（windowオブジェクトはブラウザのものなので）

結構八方塞がり感が。。。

react-rails自体を試してないので何とも言えませんが、rails5.1にはwebpackerと言うものがついているのでその機能をうまく使えば行けそうだなぁとも思ってます。

結論どうすればいいのかいまいちわからず終わってしまいました。。。

ちなみに、react-railsはサーバーサイドレンダリングに特化したものではなく、/app/assets/componentsに入っているreact componentをアセットパイプラインに入れてあげるよ的なものなのでサーバーサイドレンダリングに関してはそんなによくないかもしれないです。

しかもexecJSでreactComponentをhtmlにしたものを返すときにエラーが起きてもrailsがそのエラーを吸収してしまって上手くデバッグできないこともあります。。。

個人的にはrails + サーバーサイドレンダリング + reactであればhypernovaというgemが一番良いかと思います。

rails以外にもnodeのサーバーを建てなければいけないので少し面倒ですが。。。

すいません。。。

一応検証用にデモで作ったものを共有しておきます！（ユーザー登録が必要かもしれません）
https://c9.io/fukaminmin/react-rails/

[gesorein]

いろいろと試していただきありがとうございます。
react-rails + ES6の構成でのサーバーサイドレンダリングは、現状なかなか難しそうですね...。

Rails 4系で開発しているのでwebpackerはまだ試していないのですが、
こちらでやるとどうなるか試してみようと思います。
また、hypernovaというサーバーサイドレンダリングのためのgemがあるのですね。
非常に良さそうなので、nodeサーバーをたてて、ぜひこちらも試してみたいなと思います。

現状のところES6を使うなら「ほかの構成で開発する」という解決方法がベストかもしれません。
また良い解決方法が見つかったら、こちらに追記していこうと思います。
素晴らしいご回答ありがとうございました！