Config error: Type "next" is not assignable to "angular"

[martinnormark]

I have Cypress running like a charm in a NextJS site with TypeScript.

My config file as cypress.config.ts looks as follows:

import { defineConfig } from "cypress";
import getCompareSnapshotsPlugin from "cypress-image-diff-js/dist/plugin";

export default defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    setupNodeEvents(on, config) {
      // implement node event listeners here
      getCompareSnapshotsPlugin(on, config);
    },
  },

  component: {
    devServer: {
      framework: "next",
      bundler: "webpack",
      viewportWidth: 500,
      viewportHeight: 500,
    },
    setupNodeEvents(on, config) {
      // implement node event listeners here
      getCompareSnapshotsPlugin(on, config);
    },
  },
});

But I get an error on the component.devServer.framework assignment:

Type error: Type '"next"' is not assignable to type '"angular"'.

If I rename the config file to be .js everything works as normal and I avoid the error - but it doesn't feel right 🤔

Any ideas?