NextJS swc conflicts with babel custom configuration

I started using Cypress for NextJS, I followed their documentation for integrating babel-plugin-istanbul for transpiling during the code coverage. However, I faced this issue:

If I use baberc for configuring the plugin the test works well but the build fails because NextJS tells you that you disabled the SWC configuration ( default config instead of babel )
if I remove babelrc the build runs succeefully but the tests report the missing of babelrc configuration.

I found the same issue here but without an answer.

I configured my .babelrc for Cypress and Istanbul:

.babelrc

{
  "presets": ["next/babel"],
  "env": {
    "test": {
      "plugins": ["transform-class-properties"]
    }
  }
}

however, when I run npm run build, I got this error due to the custom configuration:

.cypress.config.ts

  import { defineConfig } from "cypress";

export default defineConfig({
  component: {
    devServer: {
      framework: "next",
      bundler: "webpack",
      webpackConfig: {
        mode: "development",
        devtool: false,
        module: {
          rules: [
            // application and Cypress files are bundled like React components
            // and instrumented using the babel-plugin-istanbul
            // (we will filter the code coverage for non-application files later)
            {
              test: /\.tsx$/,
              exclude: /node_modules/,
              use: {
                loader: "babel-loader",
                options: {
                  presets: ["@babel/preset-env", "@babel/preset-react"],
                  plugins: [
                    // we could optionally insert this plugin
                    // only if the code coverage flag is on
                    "istanbul",
                  ],
                },
              },
            },
          ],
        },
      },
    },
    setupNodeEvents(on, config) {
      require("@cypress/code-coverage/task")(on, config);

      return config;
    },
  },
});

.nycrc


  {
  "report-dir": "cypress-coverage",
  "extends": "@istanbuljs/nyc-config-typescript",
  "all": true,
  "extension": [".ts", ".tsx", ".css"],
  "exclude": [
    "cypress/**",
    "**/__fixtures__/**",
    "**/__mocks__/**",
    "**/__tests__/**",
    "cypress-coverage/**",
    "instrumented"
  ],
  "reporter": ["text-summary", "json", "html"],
  "instrumenter": "nyc",
  "sourceMap": false
}

next.config.ts


/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    if (process.env.NODE_ENV === "development") {
      return [
        {
          source: "/components",
          destination: "/page",
        },
      ];
    }

    return [];
  },
};

module.exports = nextConfig;

How to configure the plugin in SWC?

Resources:

https://docs.cypress.io/guides/tooling/code-coverage#Using-code-transpilation-pipeline

istanbuljs / babel-plugin-istanbul

NextJS swc conflicts with babel custom configuration #285