Search code examples
ruby-on-railsimport-maps

Adding HighLightJS to rails 7.1 with ImportMaps


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

Solution

  • 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"