Yarn Workspaces Monorepo中共享层加函数致React/NestJS报错求助

问题根源 #

当共享层仅导出TypeScript接口时，TS编译会自动擦除类型定义，应用导入的本质是无实际代码的空模块，因此不会触发语法解析错误。但导出实际函数后，未编译的TS代码被直接引入：

• React应用的Webpack未配置处理共享层的TS语法，导致无法解析interface等TS专属语法
• NestJS的Node运行时无法识别未编译的ES模块export语法，抛出语法错误

修复步骤 #

1. 配置共享层TypeScript编译 #

在workspaces/common目录下完成以下配置：

创建tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "declaration": true, // 生成类型定义文件
    "outDir": "./dist", // 编译输出目录
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

修改package.json

指定编译后的入口文件和类型文件，添加编译脚本：

{
  "name": "@your-monorepo/common",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch" // 开发时实时编译
  },
  "devDependencies": {
    "typescript": "^4.9.5" // 匹配项目TS版本
  }
}

2. 确保应用导入编译后的共享层 #

在React和NestJS的tsconfig.json中添加路径映射，指向共享层的编译输出目录：

{
  "compilerOptions": {
    // ...原有配置
    "paths": {
      "@your-monorepo/common": ["../common/dist"]
    }
  }
}

3. 统一编译流程 #

在根目录package.json中添加批量编译脚本，确保先编译共享层再编译其他应用：

{
  "scripts": {
    "build:common": "yarn workspace @your-monorepo/common build",
    "build:react17": "yarn workspace @your-monorepo/react17 build",
    "build:react18": "yarn workspace @your-monorepo/react18 build",
    "build:nestjs": "yarn workspace @your-monorepo/nestjs build",
    "build": "yarn build:common && yarn build:react17 && yarn build:react18 && yarn build:nestjs"
  }
}

4. 开发模式优化 #

启动开发时，先运行共享层的监听编译：

# 在common目录执行
yarn watch

再分别启动React和NestJS的开发服务，这样修改共享层代码会自动同步到应用。

关键注意事项 #

• 保持nohoist配置不变，避免TypeScript、React等依赖版本冲突
• 不要直接导入共享层的src目录文件，必须指向dist编译后的代码
• 确保所有应用的TypeScript版本与共享层一致，避免编译兼容性问题

内容的提问来源于stack exchange，提问作者Cristian G