Error: Syntax module requires highlight.js. Please include the library on the page before Quill.

[jasonfb]

I am seeing this error even though I am including the highlight js library. Error: Syntax module requires highlight.js. Please include the library on the page before Quill.

I am attempting to use ESModule syntax (import/export) building a small Stimulus component

if you are not familiar with stimulus, all you need to know is that Stimulus connects the HTML to the controller and calls the connect() method in the controller

    <div data-controller="wysihtml-editor"
         id="email_template_version__raw_source"
         style="position: static">

      <div id="email_template_version__raw_source-toolbar">
      </div>
      <%= f.hidden_field :raw_source, 'data-wysihtml-edit-target': 'rawSource' %>

      <div cols="60" id="email_template_version__raw_source-editor" >
        <%= raw( @use_version.raw_source ) %>
      </div>
    </div>

import { Controller } from "@hotwired/stimulus"

import hljs from 'highlight.js';

import Quill from 'quill'
const Delta = Quill.import('delta');

import 'quill/dist/quill.snow.css'



// Connects to data-controller="wysihtml-editor"
export default class extends Controller {
  static targets = ['rawSource'];

  connect() {
    const quill = new Quill('#' + this.element.id + "-editor", {
      modules: {
       syntax: true,              // Include syntax module
        toolbar: [['code-block']]  // Include button in toolbar
      },
      theme: 'snow'
    })

    quill.setContents(
      new Delta()
        .insert('const language = "JavaScript";')
        .insert('\n', { 'code-block': 'javascript' })
        .insert('console.log("I love " + language + "!");')
        .insert('\n', { 'code-block': 'javascript' })
    );
  }
}

result: Error: Syntax module requires highlight.js. Please include the library on the page before Quill.