Source maps with karma's coffee-loader

I’m trying to use karma(/mocha/chai/phantomjs+chrome) and webpack’s coffee-loader together, and my stack traces on test failures don’t appear to be taking advantage of source maps. I can see coffee-loader returning the generated source map info, and there’s a sourceMapUrl appended to the output file, but my test output looks like:

FAILED TESTS:
  Media
    when rendered with no image
      ✗ should be an img
        PhantomJS 1.9.7 (Mac OS X)
      AssertionError: expected 1 to equal 0
          at /Users/ggoodale/Projects/snip/client-root/test/spec/react_components/Media_spec.coffee:11122
          at assertEqual (/Users/ggoodale/Projects/snip/client-root/test/spec/react_components/Media_spec.coffee:18517)
          at /Users/ggoodale/Projects/snip/client-root/test/spec/react_components/Media_spec.coffee:29137
          at /Users/ggoodale/Projects/snip/client-root/test/spec/react_components/Media_spec.coffee:83
          at callFn (/Users/ggoodale/Projects/snip/client-root/node_modules/mocha/mocha.js:4338)
          at /Users/ggoodale/Projects/snip/client-root/node_modules/mocha/mocha.js:4331
          at /Users/ggoodale/Projects/snip/client-root/node_modules/mocha/mocha.js:4728
          at /Users/ggoodale/Projects/snip/client-root/node_modules/mocha/mocha.js:4819
          at next (/Users/ggoodale/Projects/snip/client-root/node_modules/mocha/mocha.js:4653)
          at /Users/ggoodale/Projects/snip/client-root/node_modules/mocha/mocha.js:4663

(note that the error claims to have occurred on line 11222 of Media.coffee, which is 43 lines long.)

The relevant part of my karma.conf.js:

    webpack: {
      cache: true,
      debug: true,
      devtool: '@inline-source-map',
      module: {
        preLoaders: [],
        loaders: [{
          test: /\.coffee$/,
          exclude: 'node_modules',
          loader: 'coffee-loader'
        }, {
          test: /\.css$/,
          loader: 'style!css'
        }, {
          test: /\.gif/,
          loader: 'url-loader?limit=10000&mimetype=image/gif'
        }, {
          test: /\.jpg/,
          loader: 'url-loader?limit=10000&mimetype=image/jpg'
        }, {
          test: /\.png/,
          loader: 'url-loader?limit=10000&mimetype=image/png'
        }]
      },
      resolve: {
        extensions: ["", ".web.coffee", ".web.js", ".js.coffee", ".coffee", ".js"],
        modulesDirectories: ["web_modules", "node_modules", "src/js/react_components", "test/spec"]
      }
    },

[abirmingham]

I’m using webpack 1.13.3, karma 1.3.0, karma-webpack 1.8.0, karma-sourcemap-loader 0.3.7, typescript 1.8.10. @sshev’s solution works great for phantomjs but console errors in chrome still refer to https://localhost:9876 rather than webpack:///. This means that clicking on exceptions in the browser console leads to the giant webpack file, rather than the original source files.

The good news is that the payload is mapped, and the original source files are included in Chrome under webpack:///. Further, setting breakpoints in those files does succeed. So I can set breakpoints in the giant webpack file (e.g. _https://localhost:9876/test/MyComponentTest.ts_), the original source file (e.g. webpack:///./test/MyComponentTest.ts), and in files imported by the original source file (e.g. webpack:///./src/MyComponent.ts). Breakpoints to all three of those locations work as expected.

However, I’d hope that console stack traces could refer to the webpack:/// file, not the https:// file.

[fixpunkt]

+1 Still can’t make this work, even with babel-loader. Where would I begin debugging this?