Process source code files through another babel plugin after passed by webpack babel loader

Question

I've added a babel plugin to babel-loader through a webpack plugin, and once all the source code files are processed by that babel plugin, I want to process all those processed files by another babel plugin. How can I do this?

I've tried following

import * as babel from '@babel/core'
import { Compiler, Dependency, NormalModule, sources } from 'webpack'

const pluginName = 'MyWebpackPlugin'

const css: Record<string, string> = {}

class MyDependency extends Dependency {
  filename: string

  constructor(filename: string) {
    super()
    this.filename = filename
  }
}

//@ts-ignore
MyDependency.Template = class MyDependencyTemplate {
  apply(dependency: MyDependency, source: sources.ReplaceSource) {
    const code = source.source() as string

    const ast = babel.transformSync(code, {
      plugins: ['babel-plugin-2'],
      filename: dependency.filename
    })

    source.replace(0, code.length, ast?.code || '')
  }
}

class MyWebpackPlugin {
  constructor() {}

  apply(compiler: Compiler) {
    compiler.hooks.compilation.tap(pluginName, compilation => {
      NormalModule.getCompilationHooks(compilation).loader.tap(
        pluginName,
        (loaderContext, module) => {
          module.loaders.unshift({
            loader: 'babel-loader',
            options: {
              plugins: ['babel-plugin-1'],
              cwd: (loaderContext as { rootContext: string }).rootContext
            },
            type: null,
            ident: null
          })
        }
      )

      compilation.dependencyTemplates.set(
        MyDependency,
        new MyDependency.Template()
      )

      compilation.hooks.finishModules.tapAsync(
        pluginName,
        (modules, callback) => {
          for (const module of modules) {
            module.addDependency(
              new MyDependency((module as NormalModule).userRequest)
            )
          }
          callback()
        }
      )
    })
  }
}

export default MyWebpackPlugin

This works as expected but I get the following error when I build webpack-build-error

ERROR in ./src/main.tsx + 2 modules
Identifier '__WEBPACK_DEFAULT_EXPORT__' has already been declared (309:80)
| }
| /* harmony default export */
| const __WEBPACK_DEFAULT_EXPORT__ = NxWelcome;/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ();
while analyzing module /Users/basantsoni/repos/projects/awesome-tools/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected]_ty_33cstxlm5j5nzftsrjfqvkxsfa/node_modules/@nx/webpack/src/utils/web-babel-loader.js??ruleSet[1].rules[3]!/Users/basantsoni/repos/projects/awesome-tools/apps/my-app/src/app/nx-welcome.tsx for concatenation

webpack compiled with 1 error (7d4fc7500560e06f)