webpack - webpack5 typescript karma ugyldige stakksporlinjer

Jeg får ikke kildekart til å vise riktige linjer når jeg bruker karma+webpack+typescript. Jeg har prøvd to innstillinger: devtool: inline-source-maps og devtool: eval-source-maps, men ingen av dem viser riktige linjer.

Testene blir utført riktig.

Spørsmål: Hvilke konfigurasjonsalternativer mangler jeg?

devtool: inline-kildekart

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>

Ingen meningsfull linje vises (commons.js:21026:23), selv om webpack typescript-guiden foreslår denne oppsettet.

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-kildekart

I begge filene (webpack.dev.config.js og karma.conf.js) endrer jeg bare én linje: devtool: eval-source-maps.

Jeg får følgende stakksporing:

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

denne stack-trace gir mer mening, men i realiteten blir ReferenceError: projects is not defined feilen i xyz.spec.ts-filen kastet ikke på linje 228, men på linje 276.

tsconfig.json (for begge tilnærminger)

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

Jeg har også prøvd ulike kombinasjoner, f.eks. med inlineSources: true/inlineSourceMaps: true i stedet for sourceMaps: true, men resultatet var nøyaktig det samme.

Dette er avhengighetene (for begge tilnærmingene):

  "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"
  }

Svar #1

Svaret er veldig overraskende - per nå har karma-webpack problemer med å behandle source maps når import brukes i kodebasen (sammenlignet med node require).

Ifølge https://github.com/ryanclark/karma-webpack/issues/493#issuecomment-780411348, kan karma-webpack ikke håndtere splitChunks riktig, så vi må slå det av:

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

Dette slår av tree shaking, noe som kan være problematisk, men linjene i stack traces er riktige.

Relaterte artikler