HIghcharts error #16 while changing Salesforce1 tab

Question

I am using highcharts in my salesforce lightning components.

There are two Salesforce1 tabs in which both contains lightning components which uses highchart to draw charts. The highchart resource files are added to both components.

In the initial load the chart is displayed as expected. but when I am changing the tab, its showing an error. (Screenshot attached).

The error mentions about highcharts error #16. When searching about this issue, it says

"This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined"

What should I do here? Any help would be appreciated.

Answer 1

This is happening because of multiple reasons.

1. Plugin file that is not fully compliant on Strict mode (with Lightning Locker Service Enabled)
2. Check inside the HighCharts Script to avoid multiple load

You can get latest HighCharts 5 Dev Preview file with Strict mode here : https://code.highcharts.com/5/highcharts.src.js

Modify the line

win.Highcharts = win.Highcharts ? win.Highcharts.error(16, true) : {

to

win.Highcharts = {

This will avoid Error #16 from happening and the Lightning Framework has native feature to avoid multiple loading of same resource file in a view. There is no need to worry about that.

Answer 2

The problem is a bug in ltng:require that has been fixed in Spring'17 already but has not yet been back ported to Winter'17 patch. I am looking into getting this fast tracked into the next Winter'17 patch that deploys to production Tuesday. This is being tracked by W-3461135.