Search code examples
javascriptphantomjssystemjs

PhantomJS - error loading js file using System.import


Here is a problem: I'm using phamtomJS 2.1.1 and I want to open my web page which is written on reactJS + typescript and I receive an exception during System.import.

Code of the index.html:

<div id="__Mount"></div>

<script src="lib/systemjs/dist/system.src.js"></script>
<script src="lib/react/dist/phantomjs-shims.js"></script>

<!-- build:js -->
<!-- endbuild -->

<!-- build:systemjs_config -->
<script>
    System.config({
        baseURL: './lib',
        paths: {
            "react*": 'react/dist/react-with-addons', 
            "react-dom": 'react-dom/dist/react-dom',
            "jquery": 'kendoui/js/jquery.min',
            "bootstrap": 'bootstrap/dist/js/npm'
        }
    });

    System.defaultJSExtensions = true;
</script>
<!-- endbuild -->

<script>
    System.import('client/mount').catch(function(e)
    {
        console.error(e);
    });
</script>

Code of mount.tsx:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {App} from './app';

ReactDOM.render(<App/>, document.querySelector("#__Mount"));

And there is an app.tsx with all the logic that should be on the page. I run phantomjs from the console using following command:

phantomjs test.js http://127.0.0.1:8080

Which give me the error:

ERROR: Error: (SystemJS) eval@[native code] __exec@http://127.0.0.1:8080/lib/systemjs/dist/system.src.js:1544:18 execute@http://127.0.0.1:8080/lib/systemjs/dist/system.src.js:4005:22 linkDynamicModule@http://127.0.0.1:8080/lib/systemjs/dist/system.src.js:3281:36 link@http://127.0.0.1:8080/lib/systemjs/dist/system.src.js:3124:28 execute@http://127.0.0.1:8080/lib/systemjs/dist/system.src.js:3491:17 doDynamicExecute@http://127.0.0.1:8080/lib/systemjs/dist/system.src.js:774:32 link@http://127.0.0.1:8080/lib/systemjs/dist/system.src.js:972:36 doLink@http://127.0.0.1:8080/lib/systemjs/dist/system.src.js:631:11 updateLinkSetOnLoad@http://127.0.0.1:8080/lib/systemjs/dist/system.src.js:677:24 http://127.0.0.1:8080/lib/systemjs/dist/system.src.js:493:30 Evaluating http://127.0.0.1:8080/lib/client/mount.js Error loading http://127.0.0.1:8080/lib/client/mount.js

Code of test.js:

var page = require('webpage').create();
page.onError = function(msg) {
    console.log("On error message "+msg);
};
page.open('http://127.0.0.1:8080/', function (status) {
    console.log("status is: " + status);
    if (status === "success") {
        console.log("success");
        setTimeout(function () {
            console.log("screenshot");
            page.render('screenshot.png');

            var js = page.evaluate(function () {
                return document;
            });
            console.log(js.all[0].outerHTML);

            phantom.exit();

        }, 10000);
    }
    else {
        console.log("not success");
        phantom.exit();
    }
});

I am really struck on it and I can't find a way. Any help or hint would be appreciated.


Solution

  • This feature is not supported yet according to issue on github: https://github.com/ariya/phantomjs/issues/14515

    So I've decided to go along with electron http://electron.atom.io/ Now it works fine for me, it launches my unit tests without showing the UI - perfect.