Adding HighLightJS to rails 7.1 with ImportMaps

Question

I'm trying to add HightlightJS

# importmap.rb    
pin "highlightjs", to: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"

// application.js
import hljs from "highlightjs"

Which gives error:

Uncaught SyntaxError: ambiguous indirect export: default

I'm trying to use the simple quickstart here: https://highlightjs.org/

What am I doing wrong? Importmaps? Or HighlightJS? How do I get it working?

The root of the problem was I was doing this:

bin/importmap pin highlightjs                                                                                                                                                         ✹
Pinning "highlightjs" to https://ga.jspm.io/npm:[email protected]/highlight.pack.js

and then breaking it worse by editing the importmap entry to the up to date but not ES module version.

As per @alex answer, it needs to be this:

bin/importmap pin highlight.js                                                                                                                                                        ✹
Pinning "highlight.js" to https://ga.jspm.io/npm:[email protected]/es/index.js

Answer 1

You have to use ES module package:
https://highlightjs.readthedocs.io/en/latest/readme.html#es6-modules-omit-in-toc

pin "highlight.js", to: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js"

import hljs from "highlight.js"

---

Or just use importmap command:

bin/importmap pin highlight.js

import hljs from "highlight.js"