Question 49662 in Javascript Question posted in
A very good W3school tutorial can be found here.

Using lunr in Angular 15? – Javascript

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/[email protected]/fesm2015/core.mjs:3445:44)
at createRootComponent (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/[email protected]/fesm2015/core.mjs:12322:35)
at ComponentFactory.create (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/[email protected]/fesm2015/core.mjs:12200:25)
at ApplicationRef.bootstrap (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/[email protected]/fesm2015/core.mjs:25405:42)
at eval (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/[email protected]/fesm2015/core.mjs:24880:28)
at _ZoneDelegate.invoke (https://angular-muhcmg.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:412:30)
at Object.onInvoke (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/[email protected]/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.
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search