Angular 15中使用lunr索引文章报错：lunr is not a function求助

问题原因 #

Angular 15 对 ES 模块的解析规则更严格，原有的命名导入方式(import * as lunr from 'lunr')无法正确识别 lunr 的函数导出结构，导致调用时报错。

解决方案 #

方案1：启用合成默认导入 #

1. 打开项目根目录的 tsconfig.json，在 compilerOptions 中添加或修改配置：

{
  "compilerOptions": {
    // 保留原有其他配置
    "allowSyntheticDefaultImports": true
  }
}

2. 使用默认导入方式引入 lunr：

import lunr from 'lunr';

方案2：直接调用模块的默认导出 #

如果不想修改 TypeScript 配置，可通过命名导入后提取默认导出：

import * as lunrModule from 'lunr';
const lunr = lunrModule.default;

验证示例 #

修改导入后，确保索引创建逻辑正常执行：

const searchIndex = lunr(function () {
  this.field('title');
  this.field('body');
  
  this.add({
    id: '1',
    title: 'Angular 15 升级指南',
    body: 'Angular 15 带来了诸多性能优化...'
  });
});

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