Как правильно загрузить библиотеку JavaScript?

Я пытаюсь отобразить данные формы в виде линейной диаграммы. Я запускаю Drupal 9 в Lando. Я использую Charts 5.0.x с подмодулем Highcharts. Я установил JS-библиотеку Highcharts с помощью composer. Это соответствующий код.

.libraries.yml

хайчарты:
  js:
    /libraries/highcharts/highcharts.js: { }
  зависимости:
    - ядро/jquery

.модуль

функция stats_grades_theme () {
  возвращаться [
    'mychart_template' => [
      'переменные' => ['chart_var' => NULL],
    ],
  ];
}

.routing.yml

статистика_степеней.render_form:
  путь: '/statistics/stats-степени'
  значения по умолчанию:
    _title: «Степени инженерных и физических наук, полученные членами недопредставленных групп»
    _form: '\Drupal\stats_degrees\Form\StatsDegreesForm'
  требования:
      _permission: 'доступ к содержимому'

.html.twig

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

<div id='контейнер' стиль='ширина:100%;высота:100%;'>
  {{ переменная_диаграммы | сырой }}
</div>

Обработчик отправки

публичная функция submitForm (массив и $ форма, FormStateInterface $ form_state) { 
   $form_state->setRebuild();
  }

Конструктор форм

 если ($form_state->isRebuilding()) {
   // получаем данные формы и строим диаграмму
    // получаем шаблон ветки
      $form['#theme'] = 'mychart_template';
      $form['#attached'] = массив(
        'библиотека' => массив ('stats_degrees/highcharts')
      );
      $form['#chart_var'] = $rendered_chart;
  }

Шаблон отображается без диаграммы. Когда я смотрю на HTML-разметку, я вижу отображаемый код диаграммы в chart_var, а это в консоли.

Uncaught ReferenceError: Highcharts не определен в js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4396
js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:128 Uncaught TypeError: $(...).highcharts не является функцией в HTMLDivElement.
[анонимно] (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4373
в Function.each (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:2)
в S.fn.init.each (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:2)
в Object.attach (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4370)
в js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:139
в Array.forEach ()
в Object.Drupal.attachBehaviors (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:136)
в js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:365
в HTMLDocument.listener (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:353)

Когда я углубляюсь в ошибку, я вижу, что здесь происходит сбой.

(Highcharts)}) (функция (w) {(функция (b) {функция 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, б)}, визуализация: функция () {var b = this.options, a = this.options.background, c = this.chart.renderer;

Правильно ли я загружаю библиотеку Highcharts?

Похоже, что вам нужно добавить 'charts_highcharts/highcharts' в качестве зависимости, например:

хайчарты:
  js:
    /libraries/highcharts/highcharts.js: { }
  зависимости:
    - ядро/jquery
    - диаграммы_highcharts/высокие диаграммы

(Если это не работает, попробуйте «charts_highcharts/charts_highcharts» вместо «charts_highcharts/highcharts»)