SWC/Babel编译common包后，Nuxt导入AppCosmosClient失败

1. 检查common包的package.json配置 #

• 确保main/module/types字段指向正确的编译产物路径，模块格式要统一：

  {
    "main": "./dist/app.js",
    "module": "./dist/app.js", // 编译为ES模块时必填
    "types": "./dist/app.d.ts",
    "type": "module" // ES模块加这个，CommonJS则删掉
  }
  

• 确认files字段包含dist目录，防止npm打包遗漏产物：

  "files": ["dist"]
  

2. 统一编译工具的输出模块格式 #

不管用SWC还是Babel，编译产物的模块系统必须和common包的type字段匹配：

• 若用ES模块（type: "module"），编译输出import/export语法：
  SWC配置示例（.swcrc）：

  {
    "jsc": {
      "parser": { "syntax": "typescript" },
      "target": "es2020",
      "module": { "type": "es6" }
    },
    "module": { "type": "es6" }
  }
  

  Babel配置示例（babel.config.json）：

  {
    "presets": [
      ["@babel/preset-typescript"],
      ["@babel/preset-env", { "modules": false }]
    ]
  }
  

• 若用CommonJS，去掉type: "module"，编译输出module.exports/require语法。

3. 正确安装本地包并清理缓存 #

• 用本地链接或相对路径安装，避免缓存干扰：
  在common目录执行：

  npm link
  

  在web（Nuxt）目录执行：

  npm link common
  

  或者直接在web的package.json里配置相对路径：

  "dependencies": {
    "common": "file:../common"
  }
  

• 安装后清理Nuxt缓存：

  npx nuxt clean
  

4. 配置Nuxt的模块解析规则 #

• Nuxt 3项目，在nuxt.config.ts里将本地包设为内联解析：

  export default defineNuxtConfig({
    nitro: {
      externals: {
        inline: ['common']
      }
    }
  })
  

• Nuxt 2项目，在nuxt.config.js里添加转译配置：

  export default {
    build: {
      transpile: ['common']
    }
  }
  

5. 验证导出语法的正确性 #

• 在common的src代码里确保是具名导出：

  // src/app.ts
  export class AppCosmosClient {
    // 类内容
  }
  

• 检查编译后的dist/app.js，确认导出结构正确：
  ES模块：export { AppCosmosClient };
  CommonJS：exports.AppCosmosClient = AppCosmosClient;

6. 全链路清理缓存 #

• 清理npm缓存：

  npm cache clean --force
  

• 重建依赖和产物：

  # 在common目录
  rm -rf node_modules dist && npm install && npm run build
  # 在web目录
  rm -rf node_modules .nuxt && npm install && npm run dev
  

内容的提问来源于stack exchange，提问作者Afiq Rosli