sourceMappingURL directive can fail if a bundled module specifies the directive

Source mapping was failing when bundling some JavaScript modules, and I have established that it was due to having multiple //@ sourceMappingURL=... directives in my bundle file. One came from a module that has been compiled from coffeescript. The module is a transient dependency via 2 other modules, so using the coffeescript loader to load the original coffeescript is not a reasonable option here.

See also: myrne/performance-now#2

This is what I end up with at the end of my bundle:

    ...
    /*
    //@ sourceMappingURL=performance-now.map
    */

    /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(19)))

/***/ }
/******/ ])
/*
//@ sourceMappingURL=bundle.js.map
*/

removing the //@ sourceMappingURL=performance-now.map line from the bundle causes the source maps to work in the browser (Chrome Version 34.0.1847.137 m).

Firefox debugger seems to be able to handle the extra directive, but it also does not use it to map to the original .coffee file, so there doesn’t seem to be any value in leaving the directive in place.

Webpack could remove existing sourceMappingURL directives, and ideally bring the specified source maps in as a section in the bundle source map (See: https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?hl=en_US#heading=h.535es3xeprgt )

To reproduce:

create these files:

// package.json
{
  "name": "test",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "performance-now": "^0.1.3"
  }
}
// webpack.config.js
module.exports = {
  entry: "./index.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  devtool: "source-map"
};
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="./bundle.js"></script>
  </body>
</html>
var now = require('performance-now');
console.log('Logged from index.js:2');

Then run:

npm install
webpack

Open index.html in Chrome 29.

Expected: console log shows “Logged from index.js:2” with link to line 2 of index.js
Actual: console log shows “Logged from index.js:2” with link to line 50 of bundle.js

Author: Fantashit

1 thought on “sourceMappingURL directive can fail if a bundled module specifies the directive

Comments are closed.