Nx构建可发布React库时生成的package.json缺失MUI依赖问题排查

背景操作回顾 #

你完成了以下操作：

• 通过Nx创建可发布React库：

  nx g @nrwl/react:lib my-new-lib --publishable --importPath=@myorg/my-new-lib
  

• 在monorepo根目录安装MUI依赖：

  npm install @mui/material @emotion/react @emotion/styled
  

• 在库组件中引入MUI的Button组件：

  import { Button } from '@mui/material';
  export function MyNewLib() {
    return (
      <div>
        <h1>Welcome to MyNewLib!</h1>
        <Button>Hello</Button>
      </div>
    );
  }
  export default MyNewLib;
  

• 执行构建命令：

  nx run my-new-lib:build
  

但构建后生成的package.json里完全没有MUI相关的依赖项。

原因分析 #

Nx默认不会自动把根目录安装的依赖同步到可发布库的package.json中——在monorepo场景下，根目录的依赖可能是多个包共享的开发依赖，Nx无法自动判断你是否需要将其作为生产依赖对外暴露，所以需要手动明确标记。

解决方法 #

你需要完成以下两步操作：

1. 将MUI依赖标记为库的生产依赖
   在monorepo根目录执行命令，把MUI相关依赖添加到你的库的package.json的dependencies中：

   npm install @mui/material @emotion/react @emotion/styled --workspace=my-new-lib
   

   如果你使用yarn或pnpm，对应调整命令即可（比如pnpm为pnpm add @mui/material @emotion/react @emotion/styled --filter my-new-lib）。

2. 重新构建库
   再次执行构建命令，这次生成的package.json就会包含MUI相关的依赖项了：

   nx run my-new-lib:build
   

补充说明 #

如果你的库仅在开发阶段（比如组件测试）用到MUI，生产发布时不需要依赖它，那应该添加--save-dev参数将其放入devDependencies。但你的库组件直接使用了MUI的Button，所以必须放在dependencies中，确保使用你这个库的项目能正确安装所需依赖。

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