thlorenz/es6ify

source maps not working

Closed this issue · 15 comments

A commented

My builder code:

'use strict';

var jadeify    = require('jadeify');
var path       = require('path')
  , fs         = require('fs')
  , browserify = require('browserify')
  , es6ify     = require('es6ify')
  , jsRoot     = path.join(__dirname, 'dest')
  , bundlePath = path.join(jsRoot, 'index.js')
  ;

browserify({ debug: true })
  .add(es6ify.runtime)
  .transform(es6ify)
  .transform(jadeify)
  .require(require.resolve('./index.js'), { entry: true })
  .require(require.resolve('./other.js'), { entry: true })
  .bundle()
  .on('error', function (err) { console.error(err); })
  .pipe(fs.createWriteStream(bundlePath));

screen shot 2014-12-01 at 17 54 34

Please be more specific, which sourcemaps, what do you see, what do you expect? .. etc.
Ideally also push a repo that reproduces this otherwise we cannot help you.
Thanks.

A commented

I trying to get source maps for jade & ES6 Generators. All works correct but source maps. In result code I seeing this lines instead base64 source maps code:

//# sourceMappingURL=<compileOutput>
A commented

Here is example of my code. It's all about es6ify only.

A commented

I using node@0.11.14.

Try to run jadeify before es6ify my guess is that they somehow get in each other's way.
@domenic may know more.

A commented

I had removed jadeify, but source maps doesn't work.

Ok, then please provide the smallest possible case that reproduces your problem (i.e. leave jadefy out of it) and push that to github.
The less code we have to deal with the better.

Thanks, so this is what I see:

[..]
//# sourceMappingURL=<compileOutput>


},{"./other":5,"co":2}],5:[function(require,module,exports){
"use strict";
'use strict';
exports.promise = new Promise(function(resolve) {
  setTimeout(function() {
    console.log('2');
    resolve();
  }, 2000);
});

//# sourceMappingURL=<compileOutput>


},{}]},{},[3,4])
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJ[..]

So es6ify is indeed adding the correct mapping url at the bottom, however these extra //# sourceMappingURL=<compileOutput> confuse the browser when it looks for it.

I have honestly no idea which part of the setup is adding this. es6ify isn't (unless traceur somehow does that).

I greped through the entire code base and am unable to find how this is added :(

Could you try with an older version of es6ify? Ideally one that uses older traceur versions?
This way we could narrow down what is doing this.

Thanks.

(unless traceur somehow does that)

I'm suspicious this might be the cause.

@domenic kinda thinking that too which is why older es6ify versions should be tested.
Just odd since we didn't upgrade traceur too recently.

Unless this only happens when generators are used ??

Ok, confirmed, things still worked with es6ify 1.4.
screen shot 2014-12-01 at 4 53 59 pm

Should we revert to older traceur version? What would we loose?
And why did the tests not show this problem, do we need to improve them, possibly they don't look for these extra source maps?

Maybe manual tests in the browsers are needed to catch all these things.

I think we just need to modify the options we pass to Traceur somehow.

Traceur started adding the //# sourceMappingUrl= to the bottom of the compiled file, then on index.js yet another //# sourceMappingUrl is added. So it gets duplicated.

In traceur 0.0.72 the options.sourceMaps possible values are false, inline and file. And they all add the //# sourceMappingUrl to the compiled file (except for false obviously 😸 ). In traceur 0.0.74+ there is a new option ("memory") but even that option adds a //# sourceMapUrl.

My approach with this PR was to use the generated traceur sourcemap, another option would be to remove the added sourcemap and keep building our own using the npm source-map package.