Skip to content

sourceMappingURL directive can fail if a bundled module specifies the directive #273

@davidmason

Description

@davidmason

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions