Unable to use on Safari and PhantomJS

[JSlain]

and maybe other browsers, who knows...
The stacktrace below is the result of a remote BrowserStack test.
I have the same result on a local PhantomJS test, but not on a local chrome or firefox.
The tests also pass on remote BrowserStack firefox or chrome (my setup isn't the culprit).

    Safari 8.0.8 (Mac OS X 10.10.5) ERROR
    Error: (SystemJS) Unable to load dependency C:/projects-git/exemples-jspm/jspm-project-es5/public/jspm_packages/github/systemjs/plugin-css@0.1.26/css.js.
    eval code

    eval@[native code]
    tryCatchReject@C:/projects-git/exemples-jspm/jspm-project-es5/public/jspm_packages/system-polyfills.src.js:1188:34
    runContinuation1@C:/projects-git/exemples-jspm/jspm-project-es5/public/jspm_packages/system-polyfills.src.js:1147:18
    when@C:/projects-git/exemples-jspm/jspm-project-es5/public/jspm_packages/system-polyfills.src.js:935:20
    run@C:/projects-git/exemples-jspm/jspm-project-es5/public/jspm_packages/system-polyfills.src.js:826:17
    _drain@C:/projects-git/exemples-jspm/jspm-project-es5/public/jspm_packages/system-polyfills.src.js:102:22
    drain@C:/projects-git/exemples-jspm/jspm-project-es5/public/jspm_packages/system-polyfills.src.js:67:15
    Evaluating C:/projects-git/exemples-jspm/jspm-project-es5/public/jspm_packages/github/systemjs/plugin-css@0.1.26.js
    Error loading C:/projects-git/exemples-jspm/jspm-project-es5/public/jspm_packages/github/systemjs/plugin-css@0.1.26.js
    Error loading C:/projects-git/exemples-jspm/jspm-project-es5/public/jspm_packages/github/twbs/bootstrap@3.3.7/css/bootstrap.css!http://localhost:9876C:/projects-git/exemples-jspm/jspm-project-es5/public/jspm_packages/github/systemjs/plugin-css@0.1.26.js as "bootstrap/css/bootstrap.css!" from C:/projects-git/exemples-jspm/jspm-project-es5/public/app/components/account/account.module.js

[guybedford]

I just tested this in Safari 5 and also in PhantomJS with the latest commit and this is definitely working fine.

[JSlain]

Ok, but it defenitely doesn't work on my side...
Look at the result of my karma tests, which run on Chrome and PhantomJS at the same time.
The Chrome test is working fine, but the PhantomJS one fails while trying to load plugin-css.

{ jspm-project-es5 } feature/withbundling » gulp test.unit.karma /cygdrive/c/projects-git/exemples-jspm/jspm-project-es5
[13:02:13] Using gulpfile C:\projects-git\exemples-jspm\jspm-project-es5\gulpfile.js
[13:02:13] Starting 'karma:unit.karma'...
01 09 2016 13:02:15.062:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
01 09 2016 13:02:15.068:INFO [launcher]: Starting browser Chrome
01 09 2016 13:02:15.073:INFO [launcher]: Starting browser PhantomJS
01 09 2016 13:02:16.589:INFO [PhantomJS 2.1.1 (Windows 7 0.0.0)]: Connected on socket /#E4sylAPcKT2SQVobAAAA with id 39209630
01 09 2016 13:02:17.026:WARN [web-server]: 404: /base/src/jspm_packages/system-polyfills.js
PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR

    Error: (SystemJS) Unable to load dependency C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/github/systemjs/plugin-css@0.1.27/css.js.
    getModule@C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:354161
    C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:356906
    require@C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:454543


    eval code
    eval@[native code]
    __exec@C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:170495
    execute@C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:456435
    linkDynamicModule@C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:356494
    link@C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:347594
    execute@C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:368529
    doDynamicExecute@C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:58925
    link@C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:68198
    doLink@C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:51323
    updateLinkSetOnLoad@C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:53097
    C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/system.src.js:9:44754
    Evaluating C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/github/systemjs/plugin-css@0.1.27.js
    Error loading C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/github/systemjs/plugin-css@0.1.27.js
    Error loading C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/github/twbs/bootstrap@3.3.7/css/bootstrap.css!http://localhost:9876C:/projects-git/exemples-jspm/jspm-project-es5/src/jspm_packages/github/systemjs/plugin-css@0.1.27.js as "bootstrap/css/bootstrap.css!" from C:/projects-git/exemples-jspm/jspm-project-es5/src/app/components/account/account.module.js

01 09 2016 13:02:17.449:INFO [Chrome 52.0.2743 (Windows 7 0.0.0)]: Connected on socket /#z8ZLhPfZRdMlq-GfAAAB with id 23750908
Chrome 52.0.2743 (Windows 7 0.0.0): Executed 17 of 17 SUCCESS (0.336 secs / 0.14 secs)

[13:02:20] Finished 'karma:unit.karma' after 6.4 s
[13:02:20] Starting 'test.unit.karma'...
[13:02:20] Finished 'test.unit.karma' after 6.04 μs

I also tried directly with PhantomJS (outside of karma), and it fails with the same error (with better identification on the code location).
In fact, i can reach the url, but if i try to get a screenshot, i get the error:

Potentially unhandled rejection 4 Unable to load dependency http://localhost:8088/jspm_packages/github/systemjs/plugin-css@0.1.27/css.js.

    getModule@http://localhost:8088/jspm_packages/system.src.js:3264:67
    http://localhost:8088/jspm_packages/system.src.js:3308:25
    require@http://localhost:8088/jspm_packages/system.src.js:3994:34


    eval code
    eval@[native code]
    __exec@http://localhost:8088/jspm_packages/system.src.js:1560:18
    execute@http://localhost:8088/jspm_packages/system.src.js:4030:22
    linkDynamicModule@http://localhost:8088/jspm_packages/system.src.js:3304:36
    link@http://localhost:8088/jspm_packages/system.src.js:3139:28
    execute@http://localhost:8088/jspm_packages/system.src.js:3514:17
    doDynamicExecute@http://localhost:8088/jspm_packages/system.src.js:771:32
    link@http://localhost:8088/jspm_packages/system.src.js:969:36
    doLink@http://localhost:8088/jspm_packages/system.src.js:628:11
    updateLinkSetOnLoad@http://localhost:8088/jspm_packages/system.src.js:674:24
    http://localhost:8088/jspm_packages/system.src.js:490:30
    Evaluating http://localhost:8088/jspm_packages/github/systemjs/plugin-css@0.1.27.js
    Error loading http://localhost:8088/jspm_packages/github/systemjs/plugin-css@0.1.27.js
    Error loading http://localhost:8088/jspm_packages/github/twbs/bootstrap@3.3.7/css/bootstrap.css!http://localhost:8088/jspm_packages/github/systemjs/plugin-css@0.1.27.js as "bootstrap/css/bootstrap.css!" from http://localhost:80 88/app/components/account/account.module.js

    http://localhost:8088/jspm_packages/system-polyfills.js:4

[guybedford]

There are natural browser bugs between environments, so it may well be in user code that this is happening. It just may take some debugging work to get there unfortunately due to the limited source maps support in Safari.

[JSlain]

At that moment, no user-code is executed at all.
It crashes as it tries to require() dependencies tree, and fail with bootstrap's css.

Here's what crashes, in PhantomJS:

system.src.js

  var useVm;
  var vm;
  __exec = function(load) {

    if (!load.source)
      return;
    if ((load.metadata.integrity || load.metadata.nonce) && supportsScriptExec)
      return scriptExec.call(this, load);
    try {
      preExec(this, load);
      curLoad = load;
      // global scoped eval for node (avoids require scope leak)
      if (!vm && this._nodeRequire) {
        vm = this._nodeRequire('vm');
        useVm = vm.runInThisContext("typeof System !== 'undefined' && System") === this;
      }
      if (useVm)
        vm.runInThisContext(getSource(load, true), { filename: load.address + (load.metadata.sourceMap ? '!transpiled' : '') });
      else
        (0, eval)(getSource(load, true)); // <-- #### CRASH ####

      postExec();
    }
    catch(e) {
      postExec(); 
      throw addToError(e, 'Evaluating ' + load.address);
    }
  };

getSource(load, true) ==

(function(System, SystemJS) {(function(require, exports, module, __filename, __dirname, global, GLOBAL) {module.exports = require("github:systemjs/plugin-css@0.1.27/css");
}).apply(__cjsWrapper.exports, __cjsWrapper.args);
})(System, System);
//# sourceURL=http://localhost:9876/base/src/jspm_packages/github/systemjs/plugin-css@0.1.27.js

Any clue?

[guybedford]

Are you saying that the getSource function itself is failing? So that running console.log(getSource(load, true)) is providing a failure already? i'd be very surprised if that is the case and it's not the exec(getSource(load, true)) part that's failing.

[JSlain]

No, i was just outputting the value of getSource(load, true) to help understand what's going on.
You asked some debugging work, I cannot go further.

That means...

exec(

(function(System, SystemJS) {(function(require, exports, module, __filename, __dirname, global, GLOBAL) {module.exports = require("github:systemjs/plugin-css@0.1.27/css");
}).apply(__cjsWrapper.exports, __cjsWrapper.args);
})(System, System);
//# sourceURL=http://localhost:9876/base/src/jspm_packages/github/systemjs/plugin-css@0.1.27.js

);

... is failling in PhantomJS (only on my side it looks like)

[JSlain]

Tried debugging that the entire day.
So far, i've found a difference between Chrome and PhantomJS:

Chrome:

proceedToFetch() load.name= http://localhost:8080/jspm_packages/github/systemjs/plugin-css@0.1.27/css.js
getModule(" http://localhost:8080/jspm_packages/github/systemjs/plugin-css@0.1.27/css.js ", loader);

PhantomJS:

getModule(" http://localhost:8080/jspm_packages/github/systemjs/plugin-css@0.1.27/css.js ", loader);
proceedToFetch() load.name= http://localhost:8080/jspm_packages/github/systemjs/plugin-css@0.1.27/css.js
Potentially unhandled rejection [4] (SystemJS) Unable to load dependency http://localhost:8080/jspm_packages/github/systemjs/plugin-css@0.1.27/css.js.

I think in PhantomJS, it try to use the module before it gets loaded.
I don't fully understand SystemJS code, that's not trivial.