How to config @cypress/code-coverage for Angular and TypeScript

The Cypress documentation for @cypress/code-coverage says to use this code...

// cypress/support/e2e.js
import '@cypress/code-coverage/support'

...and...

// cypress.config.ts
import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      require('@cypress/code-coverage/task')(on, config)
      return config
    },
  },
})

TypeScript throws errors in cypress.config.ts on the require function and tells me to use import instead. The only export from the plugin is a function named registerCodeCoverageTasks.

// @cypress/code-coverage/task.js
...

function registerCodeCoverageTasks(on, config) {
  on('task', tasks)

  // set a variable to let the hooks running in the browser
  // know that they can send coverage commands
  config.env.codeCoverageTasksRegistered = true

  return config
}

module.exports = registerCodeCoverageTasks

So the Cypress config code becomes...

// cypress.config.ts
import { defineConfig } from 'cypress';
import registerCodeCoverageTasks from '@cypress/code-coverage/task';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      registerCodeCoverageTasks(on, config);
      return config;
    },
  },
})

This throws a config error.

What am I doing wrong?

It looks like you can coerce the module.exports into an es6 import. I haven't run it all the way to the code coverage report, but this throws no loading errors:

import { defineConfig } from "cypress";
import * as ccModule from '@cypress/code-coverage/task';
const registerCodeCoverageTasks = ccModule.default

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      registerCodeCoverageTasks(on, config);
      return config;
    },
  },
})

Then for satisfying Typescript, in tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    ...