These are chat archives for systemjs/systemjs

16th
Nov 2015
Johan Alkstål
@johanalkstal
Nov 16 2015 08:14
So systemjs-builder (or system.js really) won't work with Babel 6 yet?
Francesco Pontillo
@frapontillo
Nov 16 2015 09:11
Hello, I am having issues w/ testing SystemJS modules using Karma (I am using Typescript, then transpiling everything to ES5 w/ SystemJS).
Wiredep injects dependencies for me, but this happens:
WARN [web-server]: 404: /base/bower_components/system.js/dist/system-polyfills.js
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
  ReferenceError: Can't find variable: System
  at /my/path/compiled.js:10
It looks like systemjs defaults its own module resolution to a base/ base url
And therefore fails to init polyfills, leading to a critical resolution error
Peter Müller
@Munter
Nov 16 2015 09:14
So you should probably have Karma include system-polyfills
Francesco Pontillo
@frapontillo
Nov 16 2015 09:15
If I do that explicitly SystemJS won't try to load it by itself?
Right now I have the following automatic resolutions in Karma (by Wiredep):
[ 'bower_components/system.js/dist/system.js',
  'bower_components/angular/angular.js',
  'bower_components/angular-mocks/angular-mocks.js',
  '.tmp/compiled.js',
  'src/**/*.html' ]
Peter Müller
@Munter
Nov 16 2015 09:16
You get a 404. It's pretty obvious you need system-polyfills available in the karma base
Francesco Pontillo
@frapontillo
Nov 16 2015 09:18
Oh, so you're saying it's Karma not serving all the files and not that the path is incorrect. About to try it out, thanks @Munter
Johan Alkstål
@johanalkstal
Nov 16 2015 09:20
How do you setup the use of Babel? It just keeps looking for a babel.js file in my root directory.
If I map "babel" to "node_modules/babel-core/index.js" I get errors with babel dependencies
Been trying for 1,5 day just to get the most simple setup working following all docs and tutorials I can find.
No success. :(
About to give up on it completely.
Francesco Pontillo
@frapontillo
Nov 16 2015 09:26
@Munter so now that error is gone, but I have now fallen into
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
  TypeError: Unexpected anonymous System.register call.
  at bower_components/system.js/dist/system.js:5
Which I think might be related to systemjs/systemjs#861
Francesco Pontillo
@frapontillo
Nov 16 2015 11:04
It turns out that Typescript compiles ts files into anonymous System.register calls, without specifying the module name, and this makes the registration crash with that error. Why is that?
clintoncampbell
@clintoncampbell
Nov 16 2015 17:06
I probably picked the wrong time to send a question late Saturday night, so I’ll give it another shot. :) Anybody have insight on why I lose run-time error handling in transpiled (tested Typescript and Babel) JS when I’ve imported modules. Until I import a module, everything works fine. After I import, my code begins to fail silently. I’ll paste in my prior message for reference below.

I’m running into a problem using JSPM/SystemJS with TypeScript as the transpiler that makes debugging rather difficult. When importing modules into my app, runtime errors will cause the script to fail silently (no runtime errors).

I’m able to make this work with an extremely simple setup.

app.js is loaded from a barebones index.html (loads system.js, config.js, and imports app.js). app.js contains two lines:

import $ from ‘jquery’;
console.log(undef_var);

Under these conditions, I see know errors in the Chrome dev tools, though errors reappear when I comment out the import statement. Code that’s free of runtime errors will work as intended and bring in the correct modules.

Any ideas? Debugging even a small script is quite a beast without any feedback from the compiler or runtime.
Seems to hold true with Babel as well. I imagine I’m doing something wrong. I can’t imagine this being a common bug. I’ve tried so far with Chrome 46.0.2490.80 and Safari 9.0.1. System.js is v0.19.5.

clintoncampbell
@clintoncampbell
Nov 16 2015 19:20
Glad to throw the test files in a repo if anybody wants to take a look? This issue is a show stopper on moving the team to SystemJS — silent runtime errors take so much longer to debug!
Peter Müller
@Munter
Nov 16 2015 21:28
@clintoncampbell The ideal case is you construct a failing test case in the systemjs repo and make a PR. That's usually half the work in fixing the problem
clintoncampbell
@clintoncampbell
Nov 16 2015 21:37
@Munter I’m assuming you mean to create an integration or unit test case to demonstrate the behavior. I’ve built a barebones scenario as a standalone project, but I’m not sure my test skills are strong enough to automate. I’d certainly be willing to try/learn, though I would love assistance!
I do imagine that it’s going to be necessary to instrument the browser with Selenium to demonstrate.
Guy Bedford
@guybedford
Nov 16 2015 22:03
@clintoncampbell perhaps you are using a custom promise library that doesn't throw unhandled rejections?
did you try adding a catch handler to the System.import statement like System.import('x').catch(...)?
clintoncampbell
@clintoncampbell
Nov 16 2015 22:59

@guybedford I don’t think that’s the case. My test scenario is pretty barebones:

index.html

<html>
  <head>
    <script src='jspm_packages/system.js'></script>
    <script src='config.js'></script>
    <script>
      System.import('app.js');
    </script>
  </head>
  <body>
    <p>placeholder</p>
  </body>
</html>

app.js

// import $ from 'jquery';

console.log(undef_var);

// $(document).ready(function() {
//   $('p').text('success');
// });

With the jquery import in app.js commented out, developer tools will report the error in the console.log() statement. As soon as I uncomment, I don’t see the error. It seems that my imports are actually working. If I fix the error and remove all of the comments, the jquery block will update the placeholder text.

In terms of initial configuration:

npm init -y
jspm init
jspm install jquery

For the jspm init, I accepted defaults except transpiler. I’ve had the same results with both Babel and Typescript.

Peter Müller
@Munter
Nov 16 2015 23:04
What browser are you running this in?
clintoncampbell
@clintoncampbell
Nov 16 2015 23:04
I should clarify one of my statements above. When I uncomment the first line from app.js, error reporting fails silently. In that scenario, the console will show no output and dev tools will not indicate that there was an error. I was working through some more complex code examples, and this was making my life awful.
Peter Müller
@Munter
Nov 16 2015 23:05
I notice you don't pull in the system-polyfills file
clintoncampbell
@clintoncampbell
Nov 16 2015 23:05
Latest Chrome on Mac (46.0.2490.80). Didn’t work on Safari (9.0.1) either.
Hmmm, let me give that a shot. I was working through the Getting Started guide off jspm.io and hadn’t encountered a reference to the polyfills yet.
Should I pull in the polyfills within a System.import() in index or from app.js?
Peter Müller
@Munter
Nov 16 2015 23:10
They go as a sync losing script tag before system.us
Loading
clintoncampbell
@clintoncampbell
Nov 16 2015 23:12
Added a System.import(‘jspm_packages/system-polyfills.js’) just above the import of app.js and the error handling started to work. Thanks so much! What exactly do you mean by sync loading — not familiar with the term?
Peter Müller
@Munter
Nov 16 2015 23:13
A normal script tag
clintoncampbell
@clintoncampbell
Nov 16 2015 23:15
That was my guess, but wanted to be sure. :smile: Thanks for the help. I can edit the getting started document to mention this as a gotcha. Should I just submit a pull request on that?
clintoncampbell
@clintoncampbell
Nov 16 2015 23:22
Looking at the original code that gave me an issue, I will say that error reporting is not quite as robust when using the module loader (though still pretty impressive when you account for source maps and other tricks the browser is pulling). Is this a common experience?