Unable to load hljs library TypeError: hljs.registerLanguage is not a function

[sukheja-varun]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question

OS and Version?

MacOS Catalina
version 10.15.3

Versions

Angular CLI: 9.1.4
Node: 12.16.1
OS: darwin x64

Repro steps

I just followed the steps given in the documentation
https://www.npmjs.com/package/ngx-highlightjs#import-highlighting-languages

Below is my app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NoInternetComponent } from './components/no-internet/no-internet.component';
import { HomeComponent } from './components/home/home.component';
import { DateExtensionComponent } from './components/date-extension/date-extension.component';

/**
 * Import specific languages to avoid importing everything
 * The following will lazy load highlight.js core script (~9.6KB) + the selected languages bundle (each lang. ~1kb)
 */
export function getHighlightLanguages() {
  return {
    typescript: () => import('highlight.js/lib/languages/typescript'),
    css: () => import('highlight.js/lib/languages/css'),
  };
}

@NgModule({
  declarations: [
    AppComponent,
    NoInternetComponent,
    HomeComponent,
    DateExtensionComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HighlightModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        languages: getHighlightLanguages()
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

The log given by the failure

Desired functionality

I should not see the above-shown error in the browser console and the library should work properly.

Mention any other details that might be useful

[raharrison]

Also seeing the same issue with Angular 9.1.4 + 4.1.0-beta when explicitly specifying languages to import, even in most basic example. Seems like when the module is trying to load languages, the underlying hljs is set to a blank object.

ngx-highlightjs.js:37 Unable to load hljs library TypeError: hljs.registerLanguage is not a function
    at TapSubscriber._tapNext (ngx-highlightjs.js:54)
    at TapSubscriber._next (tap.js:40)
    at TapSubscriber.next (Subscriber.js:49)
    at MapSubscriber._next (map.js:35)
    at MapSubscriber.next (Subscriber.js:49)
    at FilterSubscriber._next (filter.js:33)
    at FilterSubscriber.next (Subscriber.js:49)
    at subscribeToPromise.js:5
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:41836)

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {HIGHLIGHT_OPTIONS, HighlightModule} from "ngx-highlightjs";

export function getHighlightLanguages() {
    return {
        javascript: () => import('highlight.js/lib/languages/javascript'),
    };
}

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HighlightModule
    ],
    providers: [
        {
            provide: HIGHLIGHT_OPTIONS,
            useValue: {
                languages: getHighlightLanguages()
            }
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: []
})
export class AppComponent {
  title = 'highlighter';

  code = `function myFunction() {
  document.getElementById("demo1").innerHTML = "Hello there!";
  document.getElementById("demo2").innerHTML = "How are you?";
}`
}

app.component.html

<pre><code [highlight]="code"></code></pre>

[albyrock87]

Hi, maybe it's related to version 10 of Highlight.js:
highlightjs/highlight.js#2505

[silverio]

I am having the same issue.

[albyrock87]

To workaround the issue you can use version 9 of highlight.js:

{
  "dependencies": {
    "highlight.js": "~9.18.1",
    "ngx-highlightjs": "^4.0.2",
  }
}

[raharrison]

Using highlight.js 9.x working for me as well. 10.x apparently has some breaking changes that must be causing the issue https://github.com/highlightjs/highlight.js/blob/master/VERSION_10_UPGRADE.md

[Flya]

Hi, I have used highlight.js 9.x and still not be able to load it with steps in readme. I looked dipper and I was trying to understand why this happens to me, and founded that you tried to load highlight.js like this

ngx-highlightjs/projects/ngx-highlightjs/src/lib/highlight.loader.ts

Line 73 in 76287be

return importModule(import('highlight.js/lib/highlight'));

This will try to load chunk with highlight.js for angular and webpack, but default angular configuration is not create separate chunk for this and I didn't investigate the way how I can to do this.
The solution that work for me is imported highlight.js in my app.main.ts file and set document.defaultView.hljs = hljs;
Is anybody know better way for this?

[wendellestradairely]

I also encountered this error when I upgraded from 4.0.2 to 4.1.0-beta

[kiran-bobade]

I was facing the same issue when I visited the stackblitz demo here https://stackblitz.com/edit/ngx-highlightjs?file=src%2Fapp%2Fapp.module.ts they are using the latest beta version and it's working fine.

see the app.module.ts how they have used with some extra packages

package.json

"highlight.js": "^9.18.1",
"ngx-highlightjs": "4.1.0-beta",

app.module.ts

import * as hljs from 'highlight.js';
(document.defaultView as any).hljs = hljs;

it has fixed my issue. Hope it will be helpful.

[MurhafSousli]

I guess this can be closed now! Use the latest version 4.1.1

[cmer4]

So the issue is closed because there is workaround? is it possible to fix the issue before finally closing this?

[altsanz]

In my case just installing highlight.js@9 as a dependency fixes the issue.

[whizkidwwe1217]

I agree with @cmer4. It should automatically resolve and install the correct dependencies.

[MurhafSousli]

@cmer4 I don't understand what is the problem? I have the latest version ngx-highlightjs@4.1.1 with highlight.js@10.1.2 and it works without any errors or warning! here is a working stackblitz https://stackblitz.com/edit/ngx-highlightjs

[cmer4]

I was trying to leverage the documentation and load only xml and only the core library: { provide: HIGHLIGHT_OPTIONS, useValue: { coreLibraryLoader: () => import('highlight.js/lib/highlight'), languages: { xml: () => import('highlight.js/lib/languages/xml')} } } Thank you for sharing the stackblitz, I will try to see why I saw those errors

…

On Wed, Jul 29, 2020 at 12:26 PM Murhaf Sousli ***@***.***> wrote: @cmer4 <https://github.com/cmer4> I don't understand what is the problem? I have the latest version ***@***.*** with ***@***.*** and it works without any errors or warning! here is a working stackblitz https://stackblitz.com/edit/ngx-highlightjs — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#126 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACBXEJYPCMQGQT4BCUYMIN3R6BZVFANCNFSM4MXT27EA> .

[raharrison]

Dont know about everyone else but I'm still seeing this problem. Only solution is downgrading to highlight.js@9. This is using the exact same config as the example..

import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 
@NgModule({
  imports: [
    HighlightModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/highlight'),
        languages: {
          typescript: () => import('highlight.js/lib/languages/typescript')
        }
      }
    }
  ],
})
export class AppModule { }

[HLJS]  TypeError: hljs.registerLanguage is not a function
    at TapSubscriber._tapNext (ngx-highlightjs.js:71)
    at TapSubscriber._next (tap.js:40)
    at TapSubscriber.next (Subscriber.js:49)
    at MapSubscriber._next (map.js:35)
    at MapSubscriber.next (Subscriber.js:49)
    at FilterSubscriber._next (filter.js:33)
    at FilterSubscriber.next (Subscriber.js:49)
    at subscribeToPromise.js:5
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:27148)

Using below is also not a good solution as it brings in the entire set of highlight definitions causing big JS bloat

import * as hljs from 'highlight.js';
(document.defaultView as any).hljs = hljs;

[jiayisheji]

import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 
@NgModule({
  imports: [
    HighlightModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        languages: {
          typescript: () => import('highlight.js/lib/languages/typescript')
        }
      }
    }
  ],
})
export class AppModule { }

work ok!

[mdg1019]

Don't understand why this has been closed, because the issue definitely still exists. The downgrading to highlight.js 9.18.1 workaround worked for me. So I'm good, but I hate hacky workarounds. :(

[joernkleinbub]

My solution was:
In the AppModule "app.module.ts" for the highlighting provider

   {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/highlight'),
        languages: {

I switched to coreLibraryLoader as mentioned by @jiayisheji
coreLibraryLoader: () => import('highlight.js/lib/core'),
and the error vanished.

Could it be that the description in the README.md is wrong?
https://github.com/MurhafSousli/ngx-highlightjs#import-only-the-core-library-and-the-needed-highlighting-languages

[MurhafSousli]

Guys, I just noticed a change in highlight.js@10.x.x, if you are using the latest version of highlight.js, use highlight.js/lib/core instead of highlight.js/lib/highlight

{
    provide: HIGHLIGHT_OPTIONS,
    useValue: {
      coreLibraryLoader: () => import('highlight.js/lib/core'),
      languages: { ... }
   }
}

I will update the docs!