Support external source-maps

[codymikol]

I'm making one issue to consolidate all of the existing reports that source maps do not work with karma-webpack

Aggregated Information

• Currently using devtool: 'inline-source-map' functions, but the external devtool: 'source-map' fails.
• There is a possibility of leveraging the webpack writeToDisk option to support this, but that is blocked by #405
• TS files potentially don't even work with the inline-source-map

Current plan

Ensure that karma-webpack works out of the box will all of the built in devtool options and triage why different options might cause the plugin to fail.

documentation on these here: https://webpack.js.org/configuration/devtool/

Previous Issues

224

176

104

[AprilArcus]

karma-sourcemap-loader is attempting resolve source maps relative to the entrypoint, rather than to the corresponding build artifact in the temp directory. For example, here's what karma-sourcemap-loader receives as its file argument:

{
  path: 'karma-entrypoint.2997413823.js',
  originalPath: '/Users/ril/original/path/to/karma-entrypoint.js',
  contentPath: '/Users/ril/original/path/to/karma-entrypoint.js',
  encodings: [Object: null prototype] {},
  mtime: 2021-08-20T18:37:03.761Z,
  isUrl: false,
  doNotCache: false,
  type: undefined,
  isBinary: null
}

The path value (a relative path) is what it's using to resolve the location of the sourceMap, but in any case it doesn't have access to the karma-webpack tmpdir.

Preprocessing the webpack output artifacts rather than the entrypoint

    preprocessors: {
      '/original/path/to/karma-entrypoint.js': ['webpack'],
      [`${process.env.WEBPACK_OUTPUT_DIR}/*.js`]: ['sourcemap'],
    },

does at least get the correct files flowing through karma-sourcemap-loader, but the mocha reporter can't make use of them; presumably they need to be connected back to the entrypoint somehow which is naturally impossible after splitChunksPlugin has done its work.

[ehsan-yaqubi]

In my case, I was able to get exact line number in console, by combining two things.

• Installing the karma-source-map-support package (and adding "source-map-support" to frameworks in karma.conf.js).
• And, setting WebPack's devtool to inline-source-map (as above package does not seem to work well with other options).

Too bad IDE can not follow it :

        Error: Expected false to be true.
            at <Jasmine>
            at UserContext.<anonymous> (C:/my-project/.build/webpack:/resources/js/tests/common-tools.spec.js:40:33)
            at <Jasmine>

I mean, above should be: C:/my-project/resources/js/tests/common-tools.spec.js:40:33
(without ".build/webpack:/" part)

[renaldas-kerpe-arria]

Is this still being worked on?

[codymikol]

I don't believe so

[renaldas-kerpe-arria]

Is there any solution then? The sourcemaps are working for .spec files, but not for component files that those .spec files import.

[sergei-startsev]

If you're looking for mapped stacktraces for failed tests with external sourcemaps (devtool: 'source-map'), you may find this useful: https://github.com/sergei-startsev/karma-stacktrace/

[codymikol]

As karma is now deprecated and coming up on EOL, we are no longer planning on any significant enhancements to this project and are instead going to focus on security updates, stability, and a migration path forward as karma's lifecycle comes to an end.

Thank you for supporting and using this project!