highlightjs-line-numbers.js:21 highlight.js not detected!

[MTTTM]

Describe the bug
it is error,when import the package in vue file

my code:
import hljs from 'highlight.js'; import "highlightjs-line-numbers.js"

[rud-wtag]

Facing same issue with VanillaJS.

[arika163]

try this:

import hljs from 'highlight.js/lib/core'

window.hljs = hljs
require("highlightjs-line-numbers.js")

[rikkarth]

I'm having the same issue while using this in react.

Reproduce

1. Install

npm install highlight.js
npm install highlightjs-line-numbers.js

2. Import

import hljs from "highlight.js";
import "highlightjs-line-numbers.js";

3. Use

hljs.highlightElement(codeBlock as HTMLElement);
hljs.lineNumbersBlock(codeBlock); // Property 'lineNumbersBlock' does not exist on type 'HLJSApi'.

4. Error

Property 'lineNumbersBlock' does not exist on type 'HLJSApi'.

[em-heqian]

I've encountered this issue as well.
In module systems, import statements are typically processed before other code executes.
This can cause highlightjs-line-numbers.js to attempt to access window.hljs before it's assigned, resulting in an error.
To resolve this issue, we can take the following approach:
Use dynamic importing:

import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/default.css';

// Mount hljs to the window object
window.hljs = hljs;

// Dynamically import highlightjs-line-numbers.js
import('highlightjs-line-numbers.js').then(() => {
  // Initialize the line numbers plugin
  hljs.initLineNumbersOnLoad();
});

This method ensures that highlightjs-line-numbers.js is loaded after hljs is properly assigned to the window object, avoiding the timing issue.