sourcemaps not preserved when serving app bundle

[kwesterfeld]

When serving up the app bundle after the app "entries" trigger, the application source maps do not get served. I noticed that the file served by systems serve actually does a wrapper around the generated js, such that //# sourceMappingURL does not appear on the last line.

Example end of generated bundle:

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJvdXRwdXQuanMiLCJzb3VyY2VzQ29udGVudCI6W119
})(System, System);

I think the sourceMappingURL has to be the last line of the file or it won't work.

This makes debugging nearly impossible on a large application.

[alexisvincent]

Thats strange. Works for me. Do you have a reproducible case for me? Also, are you on the latest SystemJS, there were some issues with earlier versions of SystemJS 20.

[kwesterfeld]

I do have a reproducible small project I put together. How can I get that to you?

[kwesterfeld]

I did a bit more digging, and found that the source map produced by the bundling process (which I learned has to be called dependencies.js, no?), ends up as base64 content, which when decoded is this:

{"version":3,"sources":[],"names":[],"mappings":"","file":"output.js","sourcesContent":[]}

This got me thinking about your question, regarding systemjs version. I made sure that I was on latest, and also checked npm:

  ├── systemjs@0.20.10
  ├─┬ systemjs-builder@0.16.4

I am using jspm for this little project that reproduces the problem because my app is jspm based.

[kwesterfeld]

backup.tar.gz

Here is a backup of the mini project I put together to demonstrate the workflow. When you hit the browser, the dependencies are regenerated, but the sourcemaps are empty in the resulting content.

Notes:

• I use jspm, so the project is built using that
• I included a few modules to make sure the project goes a little beyond the simplest "hello, world", and uses the jspm css plugin
• I use npm install; npm start to demo the issue

Looking at the resulting dependencies.js in chrome webtools, I see the base64 sourcemaps stream, decode that using pbpaste|base64 --decode, and see the empty result.

[kwesterfeld]

I tracked this down, but don't have a fix yet. The issue is that sending the sourceMaps:'inline' seems to break when invoking systemjs builder; the sourcemap content are inlined but empty. I'm pretty sure this is because of a bug in systemjs builder....did a debug of the code and it seems problematic when it is going to scoop up each individual output file's sourcemaps (which are inlined, and hence missing).

I can do a workaround for this, forcing sourcemaps to be separate, which then gets the sourcemaps from the builder output and doing a manual concatenation, but that seems hackish.

OTOH a jspm bundle on the command line seems to work fine creating a bundle with inlined sourcemaps, so that would seem to be something to look further with.

[kwesterfeld]

OK, this is actually a problem that systemjs-builder was not installed globally on my box. I think I removed it by accident, but it was getting picked up by the node_modules installed for systemjs-tools from some dependency--and it was very old.