title: webpack5 typescript karma invalid stack trace lines
body: <p>I can't get source maps to show correct lines when using karma+webpack+typescript. I've tried two settings: <code>devtool: inline-source-maps</code> and <code>devtool: eval-source-maps</code>, but none of them show correct lines.</p>
  <p>The tests are executed correctly.</p>
  <p><strong>Question</strong>: what configuration options am I missing?</p>
  <hr />
  <h2><code>devtool: inline-source-maps</code></h2>
  <pre><code>1) should do xyz
       ReferenceError: projects is not defined
      at UserContext.&lt;anonymous&gt; (/var/folders/lm/nrqzgwdd6kl1lfh5n6_kr7zh0000gn/T/_karma_webpack_470937/commons.js:21026:23)
      at &lt;Jasmine&gt;
  </code></pre>
  <p>No meaningful line is displayed (<code>commons.js:21026:23</code>), although <a href="https://webpack.js.org/guides/typescript/" rel="nofollow noreferrer">webpack typescript guide</a> suggest this setup.</p>
  <p><code>webpack.dev.config.js</code></p>
  <pre><code>const path = require('path');
  
  module.exports = {
    watch: true,
    entry: './src/index',
    devtool: 'inline-source-map',
    mode: 'development',
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader',
        },
      ],
    },
    resolve: {
      extensions: ['.ts', '.js'],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, './dist'),
    },
    devServer: {
      contentBase: path.join(__dirname, './dist'),
      compress: true,
      hot: true,
    },
  };
  </code></pre>
  <p><code>karma.conf.js</code></p>
  <pre><code>const webpackConfig = require('./webpack.dev.config');
  
  module.exports = function (config) {
    config.set({
      // base path that will be used to resolve all patterns (eg. files, exclude)
      basePath: '',
  
      // frameworks to use
      // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
      frameworks: [
        'jasmine',
        'webpack'
      ],
  
      // list of files / patterns to load in the browser
      files: [
        'test/**/*.ts',
        'test/**/*.js',
      ],
  
      // list of files / patterns to exclude
      exclude: [],
  
      // preprocess matching files before serving them to the browser
      // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
      preprocessors: {
        'test/**/*.ts': ['webpack', 'sourcemap'],
        'test/**/*.js': ['webpack', 'sourcemap'],
      },
      webpack: {
        module: webpackConfig.module,
        resolve: webpackConfig.resolve,
        mode: webpackConfig.mode,
        devtool: 'inline-source-map',
      },
  
      // test results reporter to use
      // possible values: 'dots', 'progress'
      // available reporters: https://npmjs.org/browse/keyword/karma-reporter
      reporters: ['spec'],
  
      // web server port
      port: 9876,
  
      // enable / disable colors in the output (reporters and logs)
      colors: true,
  
      // level of logging
      // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
      logLevel: config.LOG_INFO,
  
      // enable / disable watching file and executing tests whenever any file changes
      autoWatch: true,
  
      // Continuous Integration mode
      // if true, Karma captures browsers, runs the tests and exits
      singleRun: false,
  
      // Concurrency level
      // how many browser should be started simultaneous
      concurrency: Infinity,
    });
  };
  
  </code></pre>
  <hr />
  <h2><code>devtool: eval-source-maps</code></h2>
  <p>in both files (<code>webpack.dev.config.js</code> and <code>karma.conf.js</code>) I'm changing only 1 line: <code>devtool: eval-source-maps</code>.</p>
  <p>I get following stack trace:</p>
  <pre><code>1) should do xyz
       ReferenceError: projects is not defined
      at UserContext.eval (webpack-internal:///./test/functions/xyz.spec.ts:228:23)
      at &lt;Jasmine&gt;
  </code></pre>
  <p>this stack trace makes more sense, but in reality, the <code>ReferenceError: projects is not defined</code> error in <code>xyz.spec.ts</code> file is thrown not on <code>228</code> line, but on <code>276</code>.</p>
  <hr />
  <p><code>tsconfig.json</code> (for both approaches)</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;sourceMap&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;target&quot;: &quot;esnext&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;removeComments&quot;: false
    },
    &quot;include&quot;: [&quot;test/**/*&quot;],
    &quot;exclude&quot;: [&quot;node_modules&quot;]
  }
  </code></pre>
  <p>I have also tried various combinations, e.g. with <code>inlineSources: true / inlineSourceMaps: true</code> instead of <code>sourceMaps: true</code>, but the result was exactly the same.</p>
  <p>These are the dependencies (for both approaches):</p>
  <pre><code>  &quot;devDependencies&quot;: {
      &quot;@types/jasmine&quot;: &quot;^3.10.3&quot;,
      &quot;karma&quot;: &quot;^6.3.10&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;^3.1.0&quot;,
      &quot;karma-firefox-launcher&quot;: &quot;^2.1.2&quot;,
      &quot;karma-ie-launcher&quot;: &quot;^1.0.0&quot;,
      &quot;karma-safari-launcher&quot;: &quot;^1.0.0&quot;,
      &quot;karma-cli&quot;: &quot;^2.0.0&quot;,
      &quot;karma-jasmine&quot;: &quot;^4.0.1&quot;,
      &quot;karma-sourcemap-loader&quot;: &quot;^0.3.8&quot;,
      &quot;karma-spec-reporter&quot;: &quot;0.0.33&quot;,
      &quot;karma-webpack&quot;: &quot;^5.0.0&quot;,
      &quot;ts-loader&quot;: &quot;^9.2.6&quot;,
      &quot;typescript&quot;: &quot;^4.5.4&quot;,
      &quot;webpack&quot;: &quot;^5.66.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.9.1&quot;,
      &quot;webpack-dev-server&quot;: &quot;^4.7.3&quot;
    }
  </code></pre>