How do I alter the order used to load JavaScript files?

Question

I created a libraries.yml file with the following content.

highcharts:
  css:
    theme:
      highcharts/css/highcharts.css: {}
  js:
    highcharts/highcharts.js: {weight: -400}
    highcharts/modules/exporting.js: {weight: -29}
    highcharts/modules/data.js: {weight: -28}
    highcharts/modules/drilldown.js: {weight: -27}
    js/hc.js: {weight: -1}
  dependencies:
    - core/drupal
    - core/jquery

hc.js is my custom JavaScript file content. I set its weight to -1 to make it the last used file, but after clearing the cache and refreshing the page, I still JavaScript error because the order used to load the JavaScript files. (hc.js is loaded before highcharts.js).

Do I need to change the content of the libraries.yml file?

Answer 1

I'd set it up like this:

highcharts:
  css:
    theme:
      highcharts/css/highcharts.css: {}
  js:
    highcharts/highcharts.js: {weight: -400}
    highcharts/modules/exporting.js: {weight: -29}
    highcharts/modules/data.js: {weight: -28}
    highcharts/modules/drilldown.js: {weight: -27}
  dependencies:
    - core/drupal
    - core/jquery

charts:
  js:
    js/hc.js: {}
  dependencies:
  - mymodule/highcharts

Then add the library mymodule/charts.