Highcharts5 which is strict mode compatible not working when Locker Service is Activated

Question

Highcharts5 which implements JavaScript strict mode is not working when Locker Service is activated.

The chart renders when the Locker Service is deactivated.

But when the Locker Service is activated, it doesn't even fire the afterScriptsLoaded, most probably because the Highcharts files are not Locker compatible. (But when I inspect, I can see the two files loaded in "Sources" tab in my Chrome browser).

Component code:-

<aura:component description="testComp" implements="force:appHostable,flexipage:availableForAllPageTypes">
    <ltng:require scripts="{!join(',',
                $Resource.namespace__highchartsv5 + '/script_highcharts/highcharts.src.js',
                $Resource.namespace__highchartsv5 + '/script_highcharts/highcharts-more.src.js'
                )}"
              afterScriptsLoaded="{!c.scriptsLoaded}" />
    <div aura:id="chartComponent" id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</aura:component>

highcharts.src.js - https://code.highcharts.com/highcharts.src.js

highcharts-more.src.js - https://code.highcharts.com/highcharts-more.src.js

Controller:-

({
    scriptsLoaded : function(component, event, helper){
        helper.drawChart(component);
    }
})

Helper:-

({
    drawChart : function(component) {
        var stackedColumnChart = new Highcharts.Chart({
            chart : {
              type: 'column',
              renderTo : component.find("chartComponent").getElement()
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]

        });
        }
})

Answer 1

OK - so this is the same issue (long standing but only recently reported) that hit the jquery plugin Select2. Basicaly there is a regular expression that should never have been run on this code that is rewriting the file with a quick exit (return "strict mode"; in this specific case) and neutralizing the content entirely. we have removed the use of that errant regex entirely.

The good news is that I copied your example above into my own test DE org running Winter'17 .12 patch and it ran with no issues. The .12 patch is scheduled to deploy sometime Tuesday 11/1.

Do you already have a support case open with Salesforce on this?

Answer 2

I also had issues using signitture pad javascript library which uses html5 canvas . After disabling locker service it worked but with locker service enabled it doesnt work in salesforce1 however it works in desktop browser all the time. Will this be fixed in an upcoming patch?