Care este modalitatea corectă de încărcare a unei biblioteci JavaScript?

Încerc să afișez datele formularului ca diagramă cu linii. Conduc Drupal 9 în Lando. Folosesc Charts 5.0.x cu submodulul Highcharts. Am instalat biblioteca Highcharts JS folosind compozitor. Acesta este codul relevant.

.biblioteci.yml

highcharts:
  js:
    /libraries/highcharts/highcharts.js: { }
  dependențe:
    - core/jquery

.modul

funcția stats_degrees_theme() {
  întoarcere [
    'mychart_template' => [
      'variables' => ['chart_var' => NULL],
    ],
  ];
}

.routing.yml

stats_degrees.render_form:
  cale: „/statistici/stats-degrees”
  implicite:
    _title: „Diplome de inginerie și științe fizice obținute de membrii grupurilor subreprezentate”
    _form: „\Drupal\stats_degrees\Form\StatsDegreesForm”
  cerinte:
      _permission: „accesează conținut”

.html.cremură

{# stats_degrees/templates/mychart-template.html.twig #}
{{ attach_library('stats_degrees/highcharts') }}

<div id='container' style='width:100%;height:100%;'>
  {{ chart_var | brut }}
</div>

Manager de trimitere

funcția publică submitForm(matrice &$form, FormStateInterface $form_state) { 
   $form_state->setRebuild();
  }

Constructor de forme

 dacă ($form_state->isRebuilding()) {
   // obțineți datele din formular și construiți diagrama
    // obține șablonul de crenguță
      $form['#theme'] = 'mychart_template';
      $form['#attached'] = matrice(
        'library' => array('stats_degrees/highcharts')
      );
      $form['#chart_var'] = $rendered_chart;
  }

Șablonul este redat fără diagramă. Când mă uit la marcajul HTML, văd codul grafic redat în chart_var și acesta este în consolă.

Eroare de referință neprinsă: Highcharts nu este definit la js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4396
js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:128 Uncaught TypeError: $(...).highcharts nu este o funcție la HTMLDivElement.
[anonim] (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4373
la Function.each (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:2)
la S.fn.init.each (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:2)
la Object.attach (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4370)
la js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:139
la Array.forEach ()
la Object.Drupal.attachBehaviors (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:136)
la js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:365
la HTMLDocument.listener (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:353)

Când analizez eroarea, văd că eșuează aici.

(Highcharts)})(function(w){(function(b){function r(b,a){this.init(b,a)} var v=b.CenteredSeriesMixin,u=b.each,n=b .extend,q=b.merge,g=b.splat;n(r.prototype,{coll:"pane",init:function(b,a){this.chart=a;this.background=[]; a.pane.push(this);this.setOptions(b)},setOptions:function(b){this.options=q(this.defaultOptions,this.chart.angular?{background:{}}:void 0, b)},render:function(){var b=this.options,a=this.options.background,c=this.chart.renderer;

Încarc corect biblioteca Highcharts?

Se pare că ceea ce se întâmplă este că trebuie să adăugați „charts_highcharts/highcharts” ca dependență, astfel:

highcharts:
  js:
    /libraries/highcharts/highcharts.js: { }
  dependențe:
    - core/jquery
    - charts_highcharts/highcharts

(Dacă acest lucru nu funcționează, încercați „charts_highcharts/charts_highcharts” în loc de „charts_highcharts/highcharts”)