These are chat archives for systemjs/systemjs

17th
May 2016
niabot
@niabot
May 17 2016 12:36
@natetyler You should be able to assign your imported instance to window.$ and window.jquery as a first step. This should let the other libs pick up the same instance.
natetyler
@natetyler
May 17 2016 14:09
@niabot thanks, window.$ is getting assigned properly, and the other libs do pick it up. The issue is that I basically have two instances of jquery at that point
If I want to work with one lib I can use window.$, if I want to work with the other I have to use require
I've been trying to work with the meta option in config.js to declare an export for jquery but I can't get it to work
Anatol Ulrich
@spookyvision
May 17 2016 14:19
central jquery import point, re-export from there, import from that?
natetyler
@natetyler
May 17 2016 14:21
@spookyvision I have no control over how individual libraries obtain a reference to jquery though
Anatol Ulrich
@spookyvision
May 17 2016 14:22
@natetyler: can't you change that via config? deps etc
natetyler
@natetyler
May 17 2016 14:25
I don't think so? for example semantic-ui operates directly on "jQuery" - which will be window.jQuery:
;(function ( $, window, document, undefined ) {
  //...
})( jQuery, window, document );
is there some way to shim that
Guy Bedford
@guybedford
May 17 2016 14:33
@natetyler you can use globals metadata if the module is CommonJS or global, to set the jQuery reference - System.config({ meta: { 'path/to/module.js': { format: 'global', globals: { jQuery: 'custom/jquery.js' } } } })
natetyler
@natetyler
May 17 2016 14:37
@guybedford I'm not sure that will help. The reference to jQuery is set, the problem is it's not set to the same instance as import * as $ from 'jquery'
natetyler
@natetyler
May 17 2016 14:44
@guybedford looking at https://github.com/jspm/registry/pull/332/files - does that mean I should be able to do import {$} from 'semantic-ui' ?
when I do this, I get Uncaught TypeError: semantic_ui_1.$ is not a function
natetyler
@natetyler
May 17 2016 15:20
Not sure I'm getting the format correct, this is my attempt:
meta: {
    'jspm_packages/github/Semantic-Org/Semantic-UI@2.1.8.js': { 
      format: 'global', 
      globals: { jQuery: 'jspm_packages/github/components/jquery@2.2.1.js' }
    }
  },
natetyler
@natetyler
May 17 2016 15:54
also tried this to no luck, I'm not sure what format it is expecting:
meta: {
    "semantic-ui": { 
      format: 'global', 
      globals: { jQuery: "jquery" }
    }
  },
Guy Bedford
@guybedford
May 17 2016 15:55
@natetyler try import semanticui from 'semantic-ui'
natetyler
@natetyler
May 17 2016 15:58
now I am getting Uncaught (in promise) error: jQuery is not defined
when loading semantic.js
so it never gets that far
Guy Bedford
@guybedford
May 17 2016 16:07
@natetyler so the override for Semantic UI was only for the 1.0 major version
the 2.0 branch doesn't have an override so that's why you're needing to configure this
try jspm install github:semantic-org/semantic-ui -o "{shim:{'<path/to>/semantic-ui': {deps:['jquery'],exports:'$'}}}"
with the <path/to> thing filled out correctly
basically copying the 1.0 override to the 2.0 version
if it works for you do send a registry PR
natetyler
@natetyler
May 17 2016 19:04
@guybedford thanks, what should the path be? in the existing one it looks like:
"shim": {
 +    "semantic": {
 +      "deps": [
 +        "jquery",
 +        "./semantic.css!"
 +      ],
 +      "exports": "$"
 +    }
 +  },
Guy Bedford
@guybedford
May 17 2016 19:15
@natetyler whatever the location of semantic.js is within the repo - eg src/semantic etc
natetyler
@natetyler
May 17 2016 19:16
I believe the existing shim was being applied though
if I do simple jspm install semantic-ui it installs 2.1.8
at the top of the loaded .js file:
"format global";
"deps jquery";
"deps ./semantic.css!";
"exports $";
that is being properly shimmed in no?
natetyler
@natetyler
May 17 2016 19:36
in any case, jquery is being marked as a dependency and loaded appropriately. However, on loading, it is not setting window.jQuery due to the loader environment, so when semantic.js loads, window.jQuery is undefined
I think I need something with meta and setting globals
this line in jquery is causing it to skip setting window.$ and window.jQuery:
if ( typeof module === "object" && typeof module.exports === "object" ) {
Alex Widener
@alexwidener
May 17 2016 19:41

Hi Guy and all. I have a kind of atypical question for you guys. I'm writing tools in Adobe Premiere and using npm/jspm/systemjs for es6 to es5 compilation.

If it helps, Adobe's node version is IO.js 1.2.0(which I have no control over) - so we don't get these errors in the browser, only within Adobe.

I've been stuck on a problem for 4 days and figured out this morning that it was a difference between and older version of systemjs and a newer version. Through a bunch of uninstalling and reinstalling today, I figured out that the last working version was systemJS v0.19.24 and the next version, v0.19.25 is not working for us - as it looks like the following was implemented in(system.src.js/system.js):

function getSource(load)
        .....(skip a couple of lines)
      return (wrap ? '(function(System, SystemJS) {' : '') + load.source + (wrap ? '\n})(System, System);' : '')

So this line is where it messes up - the error reports

})(System, System)
    System is not defined

Like I said, v 0.19.24 is good and v0.19.25 is broken.

I'm curious if there's something I can do to update compatibility or if I'm going to be forever stuck on this version. And if it's at all possible, an explanation of what is going on would put my mind at ease, I've been stuck on it for days and super stressed out over this. :)

natetyler
@natetyler
May 17 2016 20:30
@guybedford - thanks for helping. We are using electron, aurelia (including system.js), and typescript. All three of these are contributing to this problem in some way. I added a line to delete window.module which was making jquery skip setting the globals (this is an electron quirk). I moved from import * as $ from 'jquery' to using import $ = require('jquery') and, for some reason semantic-ui was marked as dependent on jquery@2.2.1 from github/components so I changed the version to make it match everything else. This has solved the problem.
Guy Bedford
@guybedford
May 17 2016 20:34
Thanks @natetyler for the update. I've added jspm/registry@d9f42b7 which should correct the semantic UI override now. THe window.module thing is interesting I'll look into that further in Electron.
natetyler
@natetyler
May 17 2016 20:43
@guybedford seems like a relatively well known issue without a great official solution electron/electron#254
at least not with system.js, when loading with a script tag it's easy enough to do <script src="jquery.min.js" onload="window.$ = window.jQuery = module.exports"></script>
Guy Bedford
@guybedford
May 17 2016 20:45
@natetyler is that github:components/jquery or npm:jquery in jspm?
I'm not sure I follow how it would happen actually
System.import('jquery') when running in Electron SystemJS should be using require('vm') to do execution
as a result, there should be no module variable in scope
Guy Bedford
@guybedford
May 17 2016 21:57
So Electron sets window.module and window.require while Node just adds them as scope variables... that is really annoying.