browserify: sourceMappingURL directive can fail if a bundled module specifies the directive

If a bundled module has a sourceMappingURL directive, browserify will leave it intact, which appears to be worthless or harmful towards getting source maps to work properly in browsers.

Ideally, when browserify is generating source maps it would detect sourceMappingURL directives in bundled modules and include the contents of the targeted source maps in the bundle’s source map. At very least, the directives should be removed during bundling to prevent possible conflicts.

The same issue is present in webpack, so I will refer to the bug report there rather than duplicate it: https://github.com/webpack/webpack/issues/273

The only difference between browserify and webpack with this issue is that browserify does not use the deprecated //@ form of the directive, so it will only see the issue of duplicate sourceMappingURL directives when the bundled module has a directive in the form //# sourceMappingURL=....

About this issue

Original URL
State: open
Created 10 years ago
Reactions: 2
Comments: 26 (2 by maintainers)

Commits related to this issue

fix: remove --debug flag for browserify. According to the spec (https://goo.gl/UQJKOW) the source map comment should be at the very end of the file. Browser's adhere to that, i.e. use the last source... — committed to mprobst/node-source-map-support by mprobst 9 years ago
fix: remove --debug flag for browserify. According to the spec (https://goo.gl/UQJKOW) the source map comment should be at the very end of the file. Browser's adhere to that, i.e. use the last source... — committed to mprobst/node-source-map-support by mprobst 9 years ago

Most upvoted comments

I just added a sample repo here: https://github.com/jeremija/lerna-ts-example. Instructions provided in README.md.

EDIT I just realized that there is an easier way to do this in TypeScript, without the need for sourceify. The sourceMap property needs to be removed from tsconfig.json, and both inlineSourceMap and inlineSources need to be set to true.

Still, sourceify is useful in cases of 3rd-party libraries which might have source map file references instead of inlined sources.

jeremija on Mar 26, 2019

browser-pack should merge source maps correctly afaik. transforms are individually responsible for reading input source maps and outputting merged ones. i’m not sure what specifically is going wrong for people in this issue, but with a repro i could take a look at it

goto-bus-stop on Mar 25, 2019

@goto-bus-stop nvm, swc generates wrong sourcemaps, https://github.com/swc-project/swc/issues/349, so I was thinking browserify does not support them. It does.

dy on Mar 26, 2019

I think I have the same issue.

I compile TypeScript using an external compiler (grunt-ts, because the existing browserify TypeScript transforms/plugins are all borked).

So I have a directory with commonJS JavaScript modules, each with a //# sourceMappingURL directive and a map file pointing to the TypeScript sources.

Then I use browserify with debug: true on the main file, but it ignores the existing directives and the bundle’s sourcemap points to the intermediate commonJS JavaScript instead of the original TypeScript.

When I look into the bundled JavaScript I see the original //# sourceMappingURL directives are not removed.

I tried it with plain browserify (and a base64 decoder to inspect the inline sourcemap) and also with exorcist to output a separate file.

Note I’m on working on windows, if that matters for anything.

Bartvds on Jun 6, 2014