When using the charts_highcharts library, a JavaScript error occurs:
TypeError: Cannot read properties of undefined (reading 'Contents')
This happens because charts_highcharts.js is loaded before charts.js.
The root cause is that the library definition for charts_highcharts sets a negative weight (weight: -1), which can cause it to load earlier than its dependency (charts/global).
1. Enable the Charts module and Charts Highcharts submodule.
2. Configure Highcharts.
3. Visit How to Use the Charts API page. (charts/example/display)
Remove the weight: -1 from charts_highcharts.libraries.yml to ensure the dependency charts/global is always loaded first.
The patch removes the unnecessary weight setting.
1. charts.js is always loaded before charts_highcharts.js.
2. No more undefined JavaScript errors.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | 3547178.patch | 534 bytes | lohndaniel |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
lohndaniel commentedComment #3
lohndaniel commentedComment #4
andileco commentedHi @lohndaniel. Thank you for posting the steps to reproduce and your patch, but I'm unable to reproduce the issue (see attached). Can you provide any more information about how you installed the libraries and if you have any custom JS in your site? To be fair, I'm also not experiencing an issue with your patch applied either. But before I commit, I'd like to better understand why you are getting an error and I'm not.
Comment #5
lohndaniel commentedHello andileco,
Okay. Thank you for looking into the issue further.
I installed a leatest version (10.5.3) of Drupal 10 with Composer so I could test the module.
I installed charts module 5.1 with composer.
I only need the highcharts module.
I edited my composer.json file based on the sub-module readme file (here, a question arose as to why the module does not have its own composer.json file that would automatically install the necessary add-ons).
After installing the libraries, I enabled the Charts, Highcharts, and Charts API Example modules.
I checked out the example page where I saw that Charts needed to be configure.
I have set a default setting:
Charting library: Highcharts
Chart type: Line
Under Highcharts settings enabled "Enable Highcharts' "Data" library"
and "Enable Highcharts' "Exporting" library" options.
Then I reopened the example page and saw the above js error in the console log.
Then I checked the js loading order and indeed, the line
<script src="/modules/contrib/charts/js/charts.js?v=10.5.3"></script>was preceded by<script src="/modules/contrib/charts/modules/charts_highcharts/js/ charts_highcharts.js?v=10.5.3"></script>line.With the weight removed, the correct order was established.
I hope that you will now be able to reproduce it.
Thanks for your help.
All the best,
Daniel
Comment #7
andileco commentedOK, I figured out that the issue occurs when you have BigPipe enabled. I have it disabled in my test environment.
As I mentioned before, I did observe that the module (and particularly the JS override: the last Chart in How to Use the Charts API) is working with the weight removed. I'm creating a MR of your patch and will commit it today.
Comment #8
andileco commented