无法导入Ajv：TypeScript中导入Ajv出现default导出错误

问题原因 #

Ajv v8+版本的ESM模块采用命名导出，不再提供默认导出，所以你用import Ajv from 'ajv'这种默认导入的写法会触发语法错误。

修复步骤 #

1. 修改Ajv的导入方式，改用命名导入：
   将原来的

   import Ajv from 'ajv';
   

   替换为

   import { Ajv } from 'ajv';
   

2. （可选优化）JTD类型的导入可以改用更规范的路径：
   将

   import type {JTDSchemaType} from 'ajv/dist/jtd';
   

   替换为

   import type { JTDSchemaType } from 'ajv/jtd';
   

修改后的完整代码 #

import { Ajv } from 'ajv';
import type { JTDSchemaType } from 'ajv/jtd';
import { contactLink } from './type.js';

const ajv = new Ajv();

const contactLinkSchema: JTDSchemaType<contactLink> = {
  properties: {
    header: { type: 'string' },
    link: { type: 'string' },
    description: { type: 'string' },
  },
  optionalProperties: {
    iconName: { type: 'string' },
  },
};

export const contactLinkValidator = ajv.compile(contactLinkSchema);

补充说明 #

这个修改在web-dev-server和Rollup环境下都适用，不需要额外调整构建配置，只要导入方式符合Ajv的ESM导出规范即可。

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