在NextJS中使用带NestJS Swagger装饰器的DTO构建报错问题

问题根源 #

Next.js生产构建流程中，TypeScript类型检查会在webpack加载器处理源码之前执行。你的loader虽然能移除装饰器代码，但TS已经先扫描到了import { ApiProperty } from '@nestjs/swagger'语句，而前端项目并没有安装这个包，因此抛出模块找不到的错误。dev模式下流程逻辑不同，所以没触发这个问题。

解决方案 #

方案1：添加空类型声明（推荐） #

给@nestjs/swagger创建一个空的类型声明文件，让TS编译时能识别这些导出：

1. 在项目根目录创建types/@nestjs/swagger/index.d.ts文件
2. 写入以下内容：

export const ApiProperty: any;
export const ApiHideProperty: any;
export const ApiPropertyOptional: any;
export const RecordExists: any;

3. 修改tsconfig.json，确保include字段包含这个类型目录：

{
  "include": ["src/**/*", "types/**/*"]
}

方案2：强制webpack loader前置执行 #

调整next.config.js中的loader规则，添加enforce: 'pre'，让loader在TS编译前先处理源码：

// next.config.js中webpack配置部分
webpack(config) {
  Array.prototype.push.apply(config.module.rules, [
    // ...其他规则
    {
      test: /\.ts$/,
      loader: path.resolve(__dirname, './webpack/dto-adapter.loader.js'),
      exclude: /node_modules/,
      enforce: 'pre' // 强制在TS编译前执行
    },
    {
      test: /\.ts$/,
      loader: path.resolve(__dirname, './webpack/i18n-adapter.loader.js'),
      exclude: /node_modules/,
      enforce: 'pre'
    },
  ])
  return config;
},

这个配置会让你的loader优先于TS处理代码，移除import和装饰器后，TS就不会再检测到@nestjs/swagger的依赖。

方案3：临时禁用TS构建检查（不推荐） #

如果需要快速绕过问题，可以在next.config.js中禁用Next.js的内置类型检查，但这会忽略所有TS错误，仅建议紧急场景使用：

const nextConfig = {
  // ...其他配置
  typescript: {
    ignoreBuildErrors: true,
  },
};

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