Sourcemaps with normal Usage, not Alternative usage

[BrainCrumbz]

We're having troubles trying to make source maps work with typescript spec source files and main source files.

If we stick with the Alternative usage described here, then generate source maps as suggested in following section here, we can happily browse typescript code from Chrome developer tools while debugging tests.

If we stick with the basic usage described here, and we load spec files through karma.conf.js, instead of require-ing them in test shim single entry point, it looks like sourcemaps stop working. Browser developer tools only show JS webpack-prepared bundles, not original typescript source files.

Is this second way feasible at all? Can anybody explain how to get there? Thanks for your time!

[JaKXz]

@BrainCrumbz As recommended in the README, in my karma.conf.js I have:

    files: ['client/tests.entry.ts'],

    preprocessors: {
      'client/tests.entry.ts': [
        'webpack',
        'sourcemap'
      ]
    },
    webpack: {
      entry: './client/tests.entry.ts',
      verbose: true,
      devtool: 'inline-source-map',
      // ...rest of my webpack config
    }

but the error messages do not map back to the source files:

FAILED TESTS:
  Component Maker
    Make selector
      ✖ should return a valid multipleCamelCased for a three-word or more selector
        Chrome 49.0.2623 (Mac OS X 10.11.3)
      ReferenceError: FooBarComponent is not defined
          at Context.<anonymous> (/Users/Jason/git/webpack-ts-demo/client/tests.entry.ts:110:57)

Anyone know what I'm doing wrong?

[galtalmor]

+1
Having same issue.
I suppose it may be related to issue #13 :( .

[donaldpipowitch]

I can verify this with a simple test:

// karma.conf.js
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: [ 'mocha' ],
    files: [ 'test/unit.js' ],
    preprocessors: {
      'test/unit.js': [ 'webpack', 'sourcemap' ]
    },
    plugins: [
      'karma-mocha',
      'karma-phantomjs-launcher',
      'karma-sourcemap-loader',
      'karma-webpack',
      'karma-spec-reporter'
    ],
    reporters: [ 'spec' ],
    browsers: [ 'PhantomJS' ],
    singleRun: true,
    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          {
            test: /\.ts(x?)$/,
            loader:
              `babel?` +
              `presets[]=${require.resolve('babel-preset-es2015')},` +
              `presets[]=${require.resolve('babel-preset-stage-0')}` +
              `!ts`
          }
        ]
      }
    },
    webpackMiddleware: {
      noInfo: true
    }
  })
}

// test/unit.js
require('./foo-unit.ts');

// test/foo-unit.ts
throw new Error('test');

Outputs

  Error: test
  at /Users/my-name/Workspace/test/test/unit.js:7594 <- webpack:///test/foo-unit.ts:1:0

This works nice. But let us change test/unit.js to test/unit.ts:

// karma.conf.js
...
    files: [ 'test/unit.ts' ],
    preprocessors: {
      'test/unit.ts': [ 'webpack', 'sourcemap' ]
    },
...

// test/unit.ts
import './foo-unit.ts';

Outputs

  Error: test
  at /Users/my-name/Workspace/test/test/unit.ts:7595

The mapping is lost.

[pltnkv]

I was faced with the same problem.
There workaround how to run webpack + typescript with sourcemaps + karma:
https://github.com/pltnkv/webpack-demo

webpack.config.js

module.exports = {
    entry: {
        app_entry: "./src/entry",
        test_entry: "./tests/entry"
    },
    output: {
        path: path.resolve("./out"),
        filename: "[name].js"
    },
    ts: {
        transpileOnly: true,
        compilerOptions: {
            target: 'ES5',
            sourceMap: true
        }
    },
    devtool: 'inline-source-map',
    // ...
};

karma.conf.js

module.exports = function (config) {
    config.set({
        frameworks: ['jasmine'],
        files: [
            'out/test_entry.js'
        ],
        reporters: ['progress'],
        preprocessors: {
            'out/test_entry.js': ['sourcemap']
        },
        port: 9876,
        colors: false,
        logLevel: config.LOG_DEBUG,
        autoWatch: true,
        singleRun: false,
        browsers: ['PhantomJS']
    });
};

[ilgooz]

@donaldpipowitch #109 (comment)
thanks, without changing .ts to .js inline-source-map options doesn't work for me and no source maps is included to final js file. after I change the extension it worked! but the src file line number problem still remains. I cannot see the actual line number on terminal but I can see it properly in Chrome console.
I expect something like this in terminal: <- webpack:///test/foo-unit.ts:1:0

[cevek]

typescript or webpack doesn't emit source maps if file extenstion is not js
Hot fix:
in node_modules/karma-webpack/index.js

// replace this
webpackOptions.output.filename = "[name]";
// by that
webpackOptions.output.filename = "[name].js";

// find this line
Plugin.prototype.readFile = function(file, callback) {
    // insert this condition
    if (file.substr(-3) !== '.js') {
        file += '.js';
    }

[galtalmor]

@cevek How about a PR?

[cevek]

Here it is #127

[sshev]

Here's native solution to make source map work in typescript unit tests:
include SourceMapDevToolPlugin plugin to webpack config and configure it to process .ts files as well:

plugins: [
  new webpack.SourceMapDevToolPlugin({
    filename: null, // if no value is provided the sourcemap is inlined
    test: /\.(ts|js)($|\?)/i // process .js and .ts files only
  })
]

[joshwiens]

Resolving this one. Multiple resolutions in the issue & the extension bug is a known issue

[adam-beck]

I see the sourcemaps in the browser. However, when I try to add a breakpoint it sends me to the bundled code. Is that normal? Also the line is off by 2 in the console and only points to the describe that is failing.

[sparkbuzz]

I'm also seeing bundles code same as @adam-beck mentioned. When I click Debug in Karma, and open for example app.component.spec.ts in my Angular 4 project, I see the WebPack bundled source, not the original .ts file.