[Solved] What is the correct way to load a JavaScript library?

Dorian Winterfeld Asks: What is the correct way to load a JavaScript library?
I am trying to display form data as a line chart. I am running Drupal 9 in Lando. I am using Charts 5.0.x w/ the Highcharts submodule. I installed the Highcharts JS library using composer. This is the relevant code.


    /libraries/highcharts/highcharts.js: {  }
    - core/jquery


function stats_degrees_theme() {
  return [
    'mychart_template' => [
      'variables' => ['chart_var' => NULL],


  path: '/statistics/stats-degrees'
    _title: 'Engineering and Physical Science Degrees Earned by Members of Underrepresented Groups'
    _form: 'Drupalstats_degreesFormStatsDegreesForm'
      _permission: 'access content'


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

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

Submission handler​

public function submitForm(array &$form, FormStateInterface $form_state) { 

Form builder​

 if ($form_state->isRebuilding()) {
   // get the form data and build the chart
    // get twig template
      $form['#theme'] = 'mychart_template';
      $form['#attached'] = array(
        'library' => array('stats_degrees/highcharts')
      $form['#chart_var'] = $rendered_chart;

The template is rendered without chart. When I look at the HTML markup, I see the rendered chart code in chart_var and this is in the console.

Uncaught ReferenceError: Highcharts is not defined at js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4396
js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:128 Uncaught TypeError: $(…).highcharts is not a function at HTMLDivElement.
[anonymous] (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4373
at Function.each (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:2)
at S.fn.init.each (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:2)
at Object.attach (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4370)
at js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:139
at Array.forEach ()
at Object.Drupal.attachBehaviors (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:136)
at js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:365
at HTMLDocument.listener (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:353)

When I drill down into the error I see it is failing here.

(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;

Am I loading the Highcharts library correctly?

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.