Migration From Vue2 to Vue Compact: Build is stuck in the loop

Question

I'm migrating my project from Vue2 to Vue compat but currently when I run npm run serve my project build throws error as expected but it got stuck into an infinite loop due which I'm not able to identify the errors as well, as it is continue in looping to throw same error again and again.

Here's my Vue.Config.js for your reference:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');
const { execSync } = require("child_process");

process.env.VUE_APP_TS = Date.now();

const parts = ["git rev-parse --abbrev-ref HEAD", "git rev-parse --short HEAD"];
const describeParts = parts.map(c =>
  execSync(c, {
    encoding: "utf-8"
  }).trim()
);

process.env.VUE_APP_SOURCE_COMMIT = describeParts.filter(p => p !== "").join("-");
console.log(`Build: ${process.env.VUE_APP_SOURCE_COMMIT}`);
const commitId = describeParts && describeParts.length ? describeParts.at(-1) : "[contenthash]";


module.exports = {
  lintOnSave: false,
  transpileDependencies: ["vuetify"],

  pluginOptions: {
    i18n: {
      locale: "en",
      fallbackLocale: "en",
      localeDir: "locales",
      enableInSFC: false
    }
  },
  chainWebpack: config => {
     config.resolve.alias.set('vue', '@vue/compat')

    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      })

    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  },
  configureWebpack: {
    watchOptions: {
      ignored: /node_modules/,
      aggregateTimeout: 300,
      poll: 300
    },
    output: {
      filename: `[name].${commitId}.js`,
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
    optimization: {
      minimize: true,
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 2000,
        usedExports: true,
        cacheGroups: {
          validation: {
            name: "validation-lang",
            chunks: (chunk) => {
              return /validation-lang-.*-json/.test(chunk.name);
            },
            enforce: true,
            priority: 20,
            reuseExistingChunk: true
          },
          defaultVendors: {
            test: /[\\/]node_modules[\\/]/,
            name: "chunk-vendors",
            chunks: 'all',
            priority: -5,
            enforce: true,
            reuseExistingChunk: true,
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
          },
          discussion: {
            test: /[\\/]node_modules[\\/]/,
            name: `chunk-discussion-vendors`,
            chunks: chunk => chunk.name === 'discussion',
            enforce: true,
            priority: 10,
            reuseExistingChunk: true
          },
          vuetifyGroup: {
            test: /[\\/]node_modules[\\/](vuetify|showdown)[\\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/);
              if (packageName && packageName.length) {
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `vendor.${packageName[1].replace('@', '')}`;
              } else {
                return "chunk-vendors";
              }
            },
            chunks: 'all',
            priority: 10,
            reuseExistingChunk: true
          }
        },
      },
    }
  }
};

1. I've installed Vue-compat
2. I've upgraded the version of Vue dependent packages with support vue 3 like vuetify, vuex, vue router.
3. In last I've run "npm-run-serve" to determine further errors but build is in the loop