NextJS swc conflicts with babel custom configuration

[alamenai]

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