如何在前端框架中使用带NestJS Swagger装饰的NX DTO库

场景与问题 #

在NX项目的共享库中定义了带class-validator校验和@nestjs/swagger注解的NestJS DTO：

import { ApiProperty } from '@nestjs/swagger';
import { MinLength, MaxLength, IsNotEmpty, IsEmail } from 'class-validator';

class SignInDto {
    @ApiProperty({ example: 'user@gmail.com' })
    @IsEmail()
    @IsNotEmpty()
    username: string;

    @ApiProperty({ example: 'password' })
    @MinLength(8)
    @MaxLength(64)
    @IsNotEmpty()
    password: string;
}

export { SignInDto };

尝试在React前端复用该DTO做表单校验：

import { SignInDto } from '@project/dto';

const SignIn = () => {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm<SignInDto>({
        resolver: classValidatorResolver(SignInDto),
    });
    // ...
}

但引入后出现大量模块解析错误，例如：

WARNING in ../../node_modules/@nestjs/common/utils/load-package.util.js 9:39-59
Critical dependency: the request of a dependency is an expression

WARNING in ../../node_modules/engine.io/node_modules/ws/lib/buffer-util.js 103:21-42
Module not found: Error: Can't resolve 'bufferutil' in '/home/noman1001/Projects/rentigo/node_modules/engine.io/node_modules/ws/lib'

WARNING in ../../node_modules/on-finished/index.js 207:11-33
Module not found: Error: Can't resolve 'async_hooks' in '/home/noman1001/Projects/rentigo/node_modules/on-finished'

解决方案（保留DTO与Swagger完整性） #

方案1：拆分DTO为纯校验类 + Swagger扩展类 #

核心思路是把校验逻辑和Swagger注解分离，前端只引入无后端依赖的纯校验类：

1. 创建纯校验基础类（无Nest/Swagger依赖）

// libs/dto/src/sign-in.dto.base.ts
import { MinLength, MaxLength, IsNotEmpty, IsEmail } from 'class-validator';

export class SignInDtoBase {
    @IsEmail()
    @IsNotEmpty()
    username: string;

    @MinLength(8)
    @MaxLength(64)
    @IsNotEmpty()
    password: string;
}

2. 创建后端用的Swagger扩展类（继承基础类并添加ApiProperty）

// libs/dto/src/sign-in.dto.ts
import { ApiProperty } from '@nestjs/swagger';
import { SignInDtoBase } from './sign-in.dto.base';

export class SignInDto extends SignInDtoBase {
    @ApiProperty({ example: 'user@gmail.com' })
    username: string;

    @ApiProperty({ example: 'password' })
    password: string;
}

3. 前端引入纯校验类

import { SignInDtoBase } from '@project/dto';

const SignIn = () => {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm<SignInDtoBase>({
        resolver: classValidatorResolver(SignInDtoBase),
    });
    // ...
}

方案2：NX库构建配置排除后端依赖 #

通过NX的构建配置，将Nest、Express等后端专属依赖标记为外部依赖，避免前端打包时引入：

修改共享库的project.json，在build目标中添加external选项：

{
  "targets": {
    "build": {
      "executor": "@nrwl/js:tsc",
      "options": {
        "outputPath": "dist/libs/dto",
        "tsConfig": "libs/dto/tsconfig.lib.json",
        "packageJson": "libs/dto/package.json",
        "main": "libs/dto/src/index.ts",
        "assets": [],
        "external": ["@nestjs/common", "@nestjs/core", "@nestjs/swagger", "express", "ws", "async_hooks"]
      }
    }
  }
}

方案3：元数据提取脚本（进阶） #

如果不想拆分类，可以编写脚本提取class-validator的元数据，生成前端可用的校验规则对象，完全避免引入后端依赖。但这种方式需要额外的构建步骤，适合复杂场景。

错误原因 #

前端打包时引入了NestJS、Express等后端依赖，这些依赖包含Node.js专属模块（如async_hooks）和动态导入表达式，而前端浏览器环境不支持这些模块，导致解析错误。

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