使用ajv时Webpack生产构建出现TypeScript编译错误求助

问题背景 #

在Webpack+TypeScript项目中使用ajv 8.12.0，开发模式下文件生成和库功能均正常，但切换到生产模式时，Webpack因ajv内部的TypeScript错误无法完成index.js构建，需解决或忽略错误以生成产物。

错误信息 #

ERROR in [REDACTED]/[PROJECT]/node_modules/ajv/lib/compile/codegen/code.ts
52:4-89
[tsl] ERROR in [REDACTED]/[PROJECT]/node_modules/ajv/lib/compile/codegen/code.ts(52,5)
      TS2322: Type 'CodeItem' is not assignable to type 'string'.
  Type 'null' is not assignable to type 'string'.
ts-loader-default_e3b0c44298fc1c14

ERROR in [REDACTED]/[PROJECT]/node_modules/ajv/lib/compile/codegen/code.ts
52:12-21
[tsl] ERROR in [REDACTED]/[PROJECT]/node_modules/ajv/lib/compile/codegen/code.ts(52,13)
      TS2322: Type 'CodeItem' is not assignable to type 'string | undefined'.
  Type 'null' is not assignable to type 'string | undefined'.
ts-loader-default_e3b0c44298fc1c14

ERROR in [REDACTED]/[PROJECT]/node_modules/ajv/lib/compile/resolve.ts
102:2-10
[tsl] ERROR in [REDACTED]/[PROJECT]/node_modules/ajv/lib/compile/resolve.ts(102,3)
      TS2349: This expression is not callable.
  Type '{ default: { (schema: SchemaObject, opts: Options, cb?: Callback | undefined): void; (schema: SchemaObject, cb: Callback): void; }; }' has no call signatures.
ts-loader-default_e3b0c44298fc1c14

ERROR in [REDACTED]/[PROJECT]/node_modules/ajv/lib/compile/resolve.ts
143:31-36
[tsl] ERROR in [REDACTED]/[PROJECT]/node_modules/ajv/lib/compile/resolve.ts(143,32)
      TS2349: This expression is not callable.
  Type '{ default: (a: any, b: any) => boolean; }' has no call signatures.
ts-loader-default_e3b0c44298fc1c14

webpack 5.84.1 compiled with 4 errors in 37642 ms

当前配置文件 #

webpack.config.js #

const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    mode: 'production',
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            }
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    optimization: {
        minimize: true,
        mergeDuplicateChunks: false,
        removeAvailableModules: true,
        usedExports: true,
        concatenateModules: true,
    },
    plugins: [
        new BundleAnalyzerPlugin(),
    ],
    stats: {
        errorDetails: true
    }
};

tsconfig.json #

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "esnext",
    "lib": [
      "ES2018",
      "dom"
    ],
    "sourceMap": false,
    "outDir": "./dist/",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "strictNullChecks": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowJs": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

解决方案 #

1. 开启TypeScript跳过第三方库类型检查 #

在tsconfig.json的compilerOptions中添加"skipLibCheck": true，该配置会跳过所有第三方依赖包的类型定义检查，直接规避ajv自身的类型错误：

{
  "compilerOptions": {
    // ... 原有配置
    "skipLibCheck": true // 新增此配置
  },
  // ... 其他配置
}

2. 调整ts-loader配置忽略指定错误或只转译不检查 #

如果不想全局跳过库类型检查，可以修改webpack中ts-loader的配置，指定忽略错误码或关闭类型检查：

• 方式一：只转译不做类型检查（构建更快）

{
    test: /\.tsx?$/,
    use: {
        loader: 'ts-loader',
        options: {
            transpileOnly: true, // 仅转译TS为JS，跳过类型检查
            happyPackMode: true // 配合transpileOnly提升构建效率
        }
    },
    exclude: /node_modules/,
}

• 方式二：忽略指定错误码（针对本次出现的TS2322、TS2349错误）

{
    test: /\.tsx?$/,
    use: {
        loader: 'ts-loader',
        options: {
            ignoreDiagnostics: [2322, 2349] // 忽略指定类型错误
        }
    },
    exclude: /node_modules/,
}

3. 升级ajv到最新兼容版本 #

ajv 8.12.0可能存在类型定义bug，执行以下命令升级到8.x系列最新版本，官方大概率已修复此类问题：

npm install ajv@latest

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