Support for ESM config files (with "type": "module")

If a project’s package.json has "type": "module", Karma fails to load the config file. I’m wondering if there would be interest in supporting ESM config files in addition to CJS (and the other currently supported flavors).

While this might not be complete or the desired solution, it looks like something like this could add ESM config support: https://github.com/tschaub/karma/commit/99f1a92ec85a1dd2efbcd0faf1ad653e4b29cf8e

[npetruzzelli]

It appears that, even though it’s not in the documentation

It is documented in the public API page: http://karma-runner.github.io/6.3/dev/public-api.html#karmaconfig

Though it may be worth adding a link to it from the config file page, in the Overview section, just after the line that describes the export:

Within the configuration file, the configuration code is put together by setting module.exports to point to a function which accepts one argument: the configuration object.

[thw0rted]

It appears that, even though it’s not in the documentation, Karma can already take a config function whose return value is a Promise. That allows you to simply write

// karma.conf.js
module.exports = function(config) {
    return import("./karma.conf.mjs").then(val => config.set(val));
}

// karma.conf.mjs
import fooPlugin from "foo-plugin";

export default function(config) {
  config.set({
    ...,
    plugins: [fooPlugin]
  });
}

I needed this when I updated to Angular 13; why I needed it is kind of an epic tale. I’m using Karma with karma-webpack; and my webpack configuration uses the AngularWebpackPlugin. Previously I imported my webpack config file, which was written in ES module format, via the esm package. As of Angular 13, manual webpack configs now require that you pass their shipped code through Babel (!), configured with a linker plugin. The linker plugin (@angular/compiler-cli/linker/babel) is exposed via the exports field in package.json, which means that you cannot use the esm package, so my old setup is no longer possible.

I figured out the solution above, to use Node’s own MJS support to dynamically import the Karma config file, which needs to be able to somehow import the Webpack config file. By writing my actual Karma config in MJS, I can simply write import webpackConfig from "./webpack.config.mjs"; and Node handles the heavy lifting, no Karma patches required. (The above works for me in Node 14, Karma 6.3.9.)