Uncaught TypeError: Cannot read properties of null (reading 'forEach')

[cpopolo]

The code for a simple time series plot has not changed in over two years, but since last week I'm seeing the Firebug error shown in the subject line. The Firebug console shows:

Code: Select all

highstock.js:9 Uncaught TypeError: Cannot read properties of null (reading 'forEach')
    at cI.init (highstock.js:9:323971)
    at new cI (highstock.js:9:321967)
    at aZ.cd (highstock.js:9:319412)
    at highstock.js:9:2535
    at Array.forEach (<anonymous>)
    at tt (highstock.js:9:2513)
    at aZ.getContainer (highstock.js:9:204576)
    at aZ.firstRender (highstock.js:9:212120)
    at aZ.<anonymous> (highstock.js:9:196545)
    at tt (highstock.js:9:2593)
    at aZ.init (highstock.js:9:195774)
    at aZ.<anonymous> (highstock.js:9:8234)
    at aZ.<anonymous> (highcharts-regression.js:146:17)
    at t.<computed> (highstock.js:9:8202)
    at new aZ (highstock.js:9:195484)
    at I.jQuery.I.jQuery.fn.highcharts (highstock.js:9:2832)
init	@	highstock.js:9
cI	@	highstock.js:9
cd	@	highstock.js:9
(anonymous)	@	highstock.js:9
tt	@	highstock.js:9
getContainer	@	highstock.js:9
firstRender	@	highstock.js:9
(anonymous)	@	highstock.js:9
tt	@	highstock.js:9
init	@	highstock.js:9
(anonymous)	@	highstock.js:9
(anonymous)	@	highcharts-regression.js:146
t.<computed>	@	highstock.js:9
aZ	@	highstock.js:9
I.jQuery.I.jQuery.fn.highcharts	@	highstock.js:9
chartProfilerDirect	@	highcharts-profiles-…meseries-v2.js:1105
success	@	highcharts-profiles-timeseries-v2.js:377
i	@	jquery-2.2.4.min.js:2
fireWith	@	jquery-2.2.4.min.js:2
z	@	jquery-2.2.4.min.js:4
(anonymous)	@	jquery-2.2.4.min.js:4
load		
send	@	jquery-2.2.4.min.js:4
ajax	@	jquery-2.2.4.min.js:4
chartProfiler	@	highcharts-profiles-timeseries-v2.js:359
check	@	buda-interval-pqgrid.js:292
e._trigger	@	pqgrid.min.js:9
checkNodes	@	pqgrid.min.js:9
(anonymous)	@	pqgrid.min.js:9
n	@	pqgrid.min.js:9
e._trigger	@	pqgrid.min.js:9
n	@	pqgrid.min.js:10
(anonymous)	@	pqgrid.min.js:10
dispatch	@	jquery-2.2.4.min.js:3
r.handle	@	jquery-2.2.4.min.js:3

Can someone give me a hint as to where to look next? Has the highstock.js module been changed recently that might be causing the issue?

Thanks.

[andrzej.b]

Hi,

Thanks for contacting us with your question!

Without looking into your code and config, it's difficult to say more about the precise root cause. At the same time, we have recently deployed Highcharts v12, which brings changes to the module imports mechanism, it might be worth checking, please see the details in the changelog.

Feel free to reach out if you have any further questions.

Kind regards,

[cpopolo]

Hi Andrejz,

That's encouraging to know... Quick follow-up questions:

((1)) How might I load with v11 to see if this was a problem then? I am currently loading the module along with the following in this order (script tags are removed because the forum code sees them unfavorably):

Code: Select all

    src="https://code.highcharts.com/stock/highstock.js"
    src="https://code.highcharts.com/maps/modules/heatmap.js"
    src="https://code.highcharts.com/modules/exporting.js"
    src="https://code.highcharts.com/stock/highcharts-more.js"
    src="https://code.highcharts.com/modules/broken-axis.js"
    src="https://code.highcharts.com/modules/no-data-to-display.js"
    src="https://code.highcharts.com/modules/boost.js"
    src="//rawgithub.com/phpepe/highcharts-regression/master/highcharts-regression.js"
    src="https://code.highcharts.com/modules/accessibility.js"

I would at least like to see the code working properly in v11 and maybe it would be sufficient for me to stay with that version.

((2)) Alternately, here's the precise line (Firebug highlighted) where the latest code is causing the problem. Can you define what type and contents are expected for the computeButtonRange variable? Can you tell if this is new or modified code in the v12 release that was somehow different in v11?



Thanks for any help with next steps.

[cpopolo]

Hi again Andrzej,

A quick update with some positive results... In my original code, I would set the chart option for rangeSelector like this:

Code: Select all

            rangeSelector: {
                enabled: true,
            },

And this would cause the error on the FIRST instance of the chart. After a second refresh of the data using AJAX, the chart would sometimes be fine - with the expected buttons to show "1 day", "1 week" or "All". But it would reliably fail on the first instance of the chart, and no chart would be rendered.

I then added the additional parameters that I see in the new documentation (which looks very good by the way):

Code: Select all

            rangeSelector: {
                enabled: true,
                verticalAlign: 'top',
                x: 0,
                y: 0
            },

This had no effect on the error. But as soon as I set enabled = false, everything works fine. So that tells me there is some kind of issue in v12 regarding the rangeSelector option, or I am not implementing it correctly, or it is in conflict with some other setting.

Still no firm solution, but for now I can turn off the rangeSelector and the user can simply zoom in to any day, week, or other range they prefer.

Thanks again...

Carl

[cpopolo]

Hi again - one last time - I think this is solved but I'd like your comment that it makes sense.

If rangeSelector.enabled is TRUE, then rangeSelector.buttons cannot be NULL or missing. In some cases (depending on the grouping level), I would have the buttons set to NULL because they don't make sense in certain grouping contexts. Once I force the buttons to be a certain array, it works fine.

Does this make sense? It does suggest that there are no longer any default buttons for grouping, because I think I remember that rangeSelector.enabled = TRUE would show default buttons whether or not the buttons were specifically set.

Thanks for mentioning the v12 change as the possibility. Once that was apparent, debugging became more straightforward.

- Carl

[andrzej.b]

Hi Carl,

Thanks for the thorough investigation.
Your findings make a lot of sense apologies for a hard time with the new setup.
For the future, if you want to use or test smth on an older version of highcharts, modify all your URLs in this way:

Code: Select all

"https://code.highcharts.com/stock/X.X.X/highstock.js"
"https://code.highcharts.com/X.X.X/highcharts.js"
"https://code.highcharts.com/X.X.X/modules/exporting.js"

(you can check valid numbers in the changelog)

If you have any more questions, feel free to reach out to me at any time.

Kind regards,