systemjs / plugin-css

CSS loader plugin
MIT License
92 stars 60 forks source link

Unable to use on Safari and PhantomJS #104

Open JSlain opened 8 years ago

JSlain commented 8 years ago

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 commented 8 years ago

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

JSlain commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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.