Using lunr in Angular 15?

Question

Using lunr to index posts in Angular. Prior to Angular 15 importing it like this worked.

import * as lunr from 'lunr';

After upgrading to Angular 15 it errors.

ERROR
Error: lunr is not a function

I recreated the error an an MVCE here.

This is the code:

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import * as lunr from 'lunr';

interface Post {
  id: string;
  title: string;
  description: string;
}

const posts = [
  {
    id: '1',
    title: 'What is JavaScript?',
    description:
      'JavaScript is a high-level, object-oriented programming language based on the ECMAScript specification.',
  },
  {
    id: '2',
    title: 'What is Java?',
    description:
      'Java is a cross-platform object-oriented programming language which at first developed by the Sun Microsystems.',
  },
  {
    id: '3',
    title: 'What is React?',
    description:
      'React is a popular JavaScript library which heavily used to build single-page applications.',
  },
];

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h1>Hello from {{name}}!</h1>
    <a target="_blank" href="https://angular.io/start">
      Learn more about Angular 
    </a>
  `,
})
export class App {
  name = 'Angular';
  public idx!: lunr.Index;
  constructor() {
    this.initializeSearchIndex(posts);
  }

  initializeSearchIndex(posts: Post[]) {
    this.idx = lunr(function () {
      this.field('title');
      this.field('description');
      posts.forEach((post) => {
        this.add(post);
      });
    });
  }
}

bootstrapApplication(App);

And this is the error:

Console was cleared
ERROR
Error: lunr is not a function
ERROR
Error: Uncaught (in promise): TypeError: lunr is not a function
TypeError: lunr is not a function
at App.initializeSearchIndex (https://angular-muhcmg.stackblitz.io/~/src/main.ts:34:20)
at new App (https://angular-muhcmg.stackblitz.io/~/src/main.ts:31:14)
at NodeInjectorFactory.App_Factory [as factory] (https://angular-muhcmg.stackblitz.io/~/src/main.ts:44:45)
at getNodeInjectable (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:3445:44)
at createRootComponent (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:12322:35)
at ComponentFactory.create (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:12200:25)
at ApplicationRef.bootstrap (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:25405:42)
at eval (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:24880:28)
at _ZoneDelegate.invoke (https://angular-muhcmg.stackblitz.io/turbo_modules/zone.js@0.12.0/dist/zone.js:412:30)
at Object.onInvoke (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:24312:33)

Also tried:

import lunr from "lunr"

And this is the error:

Error: node_modules/@fireflysemantics/documentation/lib/services/search.service.d.ts:3:8 - error TS1259: Module '"/Users/oleersoy/Temp/al/node_modules/@types/lunr/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

3 import lunr from "lunr";
         ~~~~

  node_modules/@types/lunr/index.d.ts:8:1
    8 export = lunr;
      ~~~~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

Igor · Answer 1 · 2023-04-19T18:44:27.520

1

In included code and your [mcve] lunr is not a function, it is an object. If you set a break point in your code in the constructor you can view the object's members.

edited Apr 19 '23 at 18:44

answered Apr 19 '23 at 18:09

Igor

60,821
10
100
175

Ole · Answer 2 · 2023-04-19T18:34:54.280

1

This works:

import lunr from "lunr"

Fixed Demo: https://stackblitz.com/edit/angular-2891so?file=src%2Fmain.ts,tsconfig.json

Now in the local application version I have I packaged the search service in a library, and so I had to set

 "allowSyntheticDefaultImports": true,

In both the libraries tsconfig.json and the applications ( Consuming the library) tsconfig.json.

edited Apr 19 '23 at 18:34

answered Apr 19 '23 at 18:10

Ole

41,793
59
191
359

Using lunr in Angular 15?

2 Answers2