NPM工作区单体仓库中UI包依赖管理与TypeScript配置咨询

1. react 和 react-dom：一定要设为peerDependency #

React的hooks机制严格依赖单一实例——如果UI包把react/react-dom设为dependency，npm会给UI包单独安装一份，导致Next.js应用和UI包使用不同的React实例，直接触发Invalid hook call错误。

用peerDependency的核心原因：

• 强制宿主应用（这里的两个Next.js项目）提供符合版本要求的React，确保整个项目只有一份React实例，避免hooks报错。
• 避免重复安装相同依赖，减少node_modules体积。
  在NPM工作区中，只要根目录或应用目录安装了React，UI包就能自动引用到，完全不会有问题。

2. react-youtube：优先设为dependency（内部库场景） #

你的UI包组件直接用到了react-youtube，这个依赖的管理分两种场景：

• 仅在当前monorepo内部使用：设为dependency是标准做法。NPM工作区会自动把这个依赖提升到根node_modules，两个Next.js应用共享同一份，无需各自安装。而且react-youtube本身依赖React，会自动使用peerDependency指定的宿主React版本，不会产生多实例问题。
• 若UI包未来要对外发布：如果react-youtube是UI包内部封装、不需要使用者直接调用的依赖，依然设为dependency；只有当你要求使用者必须安装特定版本的react-youtube（比如需要和他们的项目版本兼容）时，才考虑设为peerDependency。

你之前把react-youtube设为peerDependency能运行，是因为你的Next.js应用已经安装了它，但这不是标准操作——UI包本身依赖的库，不该把安装责任推给使用者，后续新增应用时很容易因为忘装react-youtube报错。

3. TypeScript适配方案 #

共享配置，统一规则 #

在根目录创建tsconfig.json，配置基础编译选项，然后让所有子项目的tsconfig.json通过extends继承根配置，确保整个monorepo的TypeScript规则一致：

// 根目录tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@your-ui/*": ["ui/src/*"]
    }
  },
  "include": ["apps/**/*", "ui/**/*"]
}

类型依赖处理 #

UI包用到的类型包（比如@types/react-youtube）直接安装为devDependency即可——可以装在UI包目录，也可以装在根目录（工作区会自动共享）。TypeScript类型只在开发阶段需要，生产构建时Next.js会完成类型检查并移除类型代码。

路径别名优化 #

通过根tsconfig的paths配置别名（比如@your-ui/*对应ui/src/*），让应用可以用import Button from '@your-ui/components/Button'这种简洁路径导入组件，避免冗长的相对路径。

统一类型检查 #

在根目录package.json中添加脚本，一键检查所有项目的类型问题：

"scripts": {
  "type-check": "tsc --noEmit"
}

内容的提问来源于stack exchange，提问作者Andreas Berglund