[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは？

質問事項

webdriver.ioを使用して私の反応アプリをテストするために、私はphantomjsを使用してそれを起動する必要があります。

最初はwebdriver.ioに問題があると思ったのですが、PhantomJSはレンダリングしようとすると空白のページを返してくることに気づきました。

テストするために、次のjavascriptファイルを書きました。

var page = require('webpage').create();
var args = require('system').args;

var output_file = 'example.png', url = args[1];
t = Date.now();

var width = 1440;
var height = 900;
page.viewportSize = { width: width, height: height };
page.paperSize = {
   format: 'A4',
   orientation: 'landscape',
   margin: { left: '1cm', right: '1cm', top: '1cm', bottom: '1cm' }
};

console.log(url);

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};

page.onLoadFinished = function (status) {
    window.setTimeout(function () {
        try {
            page.evaluate(function (w, h) {
                document.body.style.width = w + 'px';
                document.body.style.height = h + 'px';
              }, width, height);
            t = Date.now() - t;
            console.log('Loading ' + url);
            console.log('Loading time ' + t + ' msec');
            page.clipRect = {top: 0, left: 0, width: width, height: height};
            page.render(output_file);
        }
        catch (e) {
            status = e.message;
        }
        console.log(status + ';;' + output_file);
        phantom.exit();
    }, 10000);
};

try {
    page.open(url);
    console.log('loading');
}
catch (ex) {
    console.log(ex.message);
    phantom.exit();
}

を、このように立ち上げています。 phantomjs test.js http://localhost:8080

でも、何をやってもダメ。 example.png は常に空です。

現在、React 0.14.7とphantomjs 2.1.1を使っています。なぜ私のアプリをレンダリングできないのか、誰か心当たりはありませんか？

PS: 記載していませんが、chromeやfirefoxでは問題ありません。

解決方法は？

おそらく、PhantomJSでES6がサポートされていないことに関係があると思います。確認するために、私は ページ.onError() コールバックをスクリプトに追加し（いつも便利！）、いくつかのReactのサンプルサイトを開くと、このエラーが表示されます。

ReferenceError: Can't find variable: Symbol

Symbol をポリフィルするためには インジェクト a コア.js スクリプトは、この優れた パッケージ を、ターゲットURLを読み込む前にページに挿入します。

page.onInitialized = function() {
    if(page.injectJs('core.js')){
        console.log("Polyfills loaded");
    }    
}

しかし、それは外部のサイトを開く場合の話です。テストしているサイトがあなたの開発下にある場合（localhost url が示すように）、おそらく次のように babel を設定するだけで済むでしょう。 この回答 .