Transpiled code says it does not provide a default export named AppCosmosClient when imported

Question

What I'm trying to do

I'm trying to install a local node package (common) to the target folder (web). Use TypeScript in the common folder and transpile the code in common/src using Speedy Web Compiler (SWC) and have its output to common/dist. Then install the package and import AppCosmosClient from the transpiled code. Below are the file contents:

Root Project Folder Structure

Common Folder Structure

common/package.json

{
  "name": "huetech-common",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsc": "tsc",
    "build:babel": "npm run tsc && ./node_modules/.bin/babel ./src --out-dir dist --extensions .ts",
    "build": "npm run tsc && npx swc ./src --out-dir dist --extensions .ts --copy-files"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.21.5",
    "@babel/core": "^7.21.8",
    "@babel/preset-env": "^7.21.5",
    "@babel/preset-typescript": "^7.21.5",
    "@swc/cli": "^0.1.62",
    "@swc/core": "^1.3.58",
    "@types/node": "^20.1.5",
    "regenerator-runtime": "^0.13.11",
    "typescript": "^5.0.4"
  },
  "dependencies": {
    "@azure/cosmos": "^3.17.3"
  }
}

common/.swcrc

{
  "$schema": "http://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "decorators": false,
      "dynamicImport": true
    }
  },
  "module": {
    "type": "commonjs"
  }
}

common/tsconfig.json

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "es6",
    "outDir": "dist",
    "declaration": true,
    "emitDeclarationOnly": true,
    "declarationMap": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": false,
    "allowSyntheticDefaultImports": true
  },
  "ts-node": {
    "swc": true
  },
  "exclude": ["node_modules", "dist"],
  "include": ["**/*.ts", "**/*.tsx", "**/*.js"]
}

common/src/app.ts

import { CosmosClient } from "@azure/cosmos";

const cosmosClient = CosmosClient;
const options = {
  endpoint: "endpoint",
  key: "key",
};

export const AppCosmosClient = new cosmosClient(options);

Build Script (Common)

npm run tsc && npx swc ./src --out-dir dist --extensions .ts --copy-files

web/package.json

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build-common": "cd ../common && npm run build",
    "build": "npm run build-common && npm install huetech-common && nuxt build",
    "dev": "npm run build-common && npm install huetech-common && nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@mdi/font": "^7.2.96",
    "@types/express": "^4.17.17",
    "@types/node": "^18",
    "nuxt": "^3.4.3"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.4.9",
    "express": "^4.18.2",
    "huetech-common": "file:../common",
    "nuxt-start": "^2.16.3",
    "pinia": "^2.0.35",
    "vite-plugin-vuetify": "^1.0.2",
    "vuetify": "^3.2.2"
  },
  "overrides": {
    "vue": "latest"
  }
}

web/app.vue

<template>
  <v-app>
    ...
  </v-app>
</template>

<script lang="ts">
...
import { AppCosmosClient } from "huetech-common";

export default defineComponent({
  ...

  mounted() {
    console.log(AppCosmosClient);
  },
});
</script>

Runtime Error

Uncauught SyntaxError: The requested module '/_nuxt/@fs/C:/.../common/dist/app.js?t=1684250364207' does not provide an export named 'AppCosmosClient' (at app.vue:13:10)

Transpile Code in common/dist/app.js

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "AppCosmosClient", {
    enumerable: true,
    get: function() {
        return AppCosmosClient;
    }
});
var _cosmos = require("@azure/cosmos");
var cosmosClient = _cosmos.CosmosClient;
var options = {
    endpoint: "endpoint",
    key: "key"
};
var AppCosmosClient = new cosmosClient(options);

It shows the AppCosmosClient is exported as seen in line 5 Object.defineProperty(exports, "AppCosmosClient", {. Despite this, it shows that the AppCosmosClient name is not found.

What I've tried

1. Make the common/package.json to have type: "module"
2. Define the script in web/app.vue like this <script lang="ts" type="module">
3. Transpile the code using Babel

common/babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ],
    "@babel/preset-typescript"
  ]
}

Build Script (Common using Babel)

npm run tsc && ./node_modules/.bin/babel ./src --out-dir dist --extensions .ts

I still got the same result either method. I'm not sure what I'm doing wrong. Any idea how to fix this issue?