webpack5 typescript karma invalid stack trace lines

Question

I can't get source maps to show correct lines when using karma+webpack+typescript. I've tried two settings: devtool: inline-source-maps and devtool: eval-source-maps, but none of them show correct lines.

The tests are executed correctly.

Question: what configuration options am I missing?

---

devtool: inline-source-maps

1) should do xyz
     ReferenceError: projects is not defined
    at UserContext.<anonymous> (/var/folders/lm/nrqzgwdd6kl1lfh5n6_kr7zh0000gn/T/_karma_webpack_470937/commons.js:21026:23)
    at <Jasmine>

No meaningful line is displayed (commons.js:21026:23), although webpack typescript guide suggest this setup.

webpack.dev.config.js

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,
  },
};

karma.conf.js

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,
  });
};

---

devtool: eval-source-maps

in both files (webpack.dev.config.js and karma.conf.js) I'm changing only 1 line: devtool: eval-source-maps.

I get following stack trace:

1) should do xyz
     ReferenceError: projects is not defined
    at UserContext.eval (webpack-internal:///./test/functions/xyz.spec.ts:228:23)
    at <Jasmine>

this stack trace makes more sense, but in reality, the ReferenceError: projects is not defined error in xyz.spec.ts file is thrown not on 228 line, but on 276.

---

tsconfig.json (for both approaches)

{
  "compilerOptions": {
    "sourceMap": true,
    "esModuleInterop": true,
    "target": "esnext",
    "moduleResolution": "node",
    "removeComments": false
  },
  "include": ["test/**/*"],
  "exclude": ["node_modules"]
}

I have also tried various combinations, e.g. with inlineSources: true / inlineSourceMaps: true instead of sourceMaps: true, but the result was exactly the same.

These are the dependencies (for both approaches):

  "devDependencies": {
    "@types/jasmine": "^3.10.3",
    "karma": "^6.3.10",
    "karma-chrome-launcher": "^3.1.0",
    "karma-firefox-launcher": "^2.1.2",
    "karma-ie-launcher": "^1.0.0",
    "karma-safari-launcher": "^1.0.0",
    "karma-cli": "^2.0.0",
    "karma-jasmine": "^4.0.1",
    "karma-sourcemap-loader": "^0.3.8",
    "karma-spec-reporter": "0.0.33",
    "karma-webpack": "^5.0.0",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "webpack": "^5.66.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.3"
  }

Answer 1

The answer is very surprising - as for now, karma-webpack is having trouble with processing source maps, when import is used within the codebase (compared to node require).

According to https://github.com/ryanclark/karma-webpack/issues/493#issuecomment-780411348, karma-webpack can't handle splitChunks properly, so we need to turn it off:

    devtool: 'inline-source-map',
    optimization: {
      splitChunks: false
    }

This turns off tree shaking, which could be troublesome, but the lines of stack traces are correct.