JSHint and grunt.js - Highcharts is not defined

Question

I'm using Angular application, once I'm happy with everything I run grunt.js to build distribution in where everything is minified and now my problem starts. When the files are not minified all Highcharts working fine, once I minified the js files I get error Highcharts is not defined.

Partial code for highcharts, where I get hints something is wrong, see comments for errors:

function createDevicesChart (title) {
    Highcharts.setOptions ({ //error Highcharts is not defined, unresolved variable Highcharts, unresolved function setOptions
        lang: {rangeSelectorZoom: ''},
        colors: ['#F4D00B']
    });
    Highcharts.RangeSelector.prototype.render = (function (func) { //error Highcharts is not defined, unresolved variable Highcharts, unresolved variable RangeSelector
        return function () {
            func.apply (this, arguments);
            var leftPosition = this.chart.plotLeft,
            topPosition = this.chart.plotTop,
            space = 1;
            var widthChart = this.chart.chartWidth;
            var widthChartHolder = $ ('.highcharts-container >svg').width ();
            //console.log(widthChartHolder);
            for (var i = 0; i < this.buttons.length; i++) {
                this.buttons[i].attr ({
                    x: widthChartHolder - leftPosition - 41,
                    y: topPosition - 77
                });
                leftPosition += this.buttons[i].width + space;
            }
        };
    } (Highcharts.RangeSelector.prototype.render));//error Highcharts is not defined, unresolved variable RangeSelector

        .........//rest of the code 


    angular.element('#devices_chart').highcharts ('StockChart', chartingOptions); //unresolved function or method highcharts()

}

.jshintrc file:

    {
      "node": true,
      "browser": true,
      "esnext": true,
      "bitwise": true,
      "camelcase": true,
      "curly": true,
      "eqeqeq": true,
      "immed": true,
      "indent": 2,
      "latedef": true,
      "newcap": true,
      "noarg": true,
      "quotmark": "single",
      "regexp": true,
      "undef": true,
      "unused": true,
      "strict": true,
      "trailing": true,
      "smarttabs": true,
      "globals": {
        "angular": false,
        "Highcharts"  : false
      }

}

Can someone please help me? I'm really struggling here :( Many thanks

EDIT: even if I updated jshintr with false value for Highcharts, when I run grunt job it minifies all the code and I again get the error in the console:

ReferenceError: Highcharts is not defined
    at m (http://localhost/myAPP/dist/scripts/scripts.js:1:3021)
    at link (http://localhost/myAPP/dist/scripts/scripts.js:1:3125)
    at http://localhost/myAPP/dist/scripts/vendor.js:4:20180
    at s (http://localhost/myAPP/dist/scripts/vendor.js:4:14727)
    at h (http://localhost/myAPP/dist/scripts/vendor.js:4:10779)
    at h (http://localhost/myAPP/dist/scripts/vendor.js:4:10796)
    at http://localhost/myAPP/dist/scripts/vendor.js:4:10402
    at http://localhost/myAPP/dist/scripts/vendor.js:7:19333
    at s (http://localhost/myAPP/dist/scripts/vendor.js:4:14727)
    at h (http://localhost/myAPP/dist/scripts/vendor.js:4:10779) <div id="devices_chart" class="ng-isolate-scope"> 

Answer 1

You have to tell jshint how to handle such global variables.

Create a .jshintrc configuration file at the root of your project containing :

{
    // JSHint Default Configuration File (as on JSHint website)
    // See http://jshint.com/docs/ for more details

    //[...] // global conf ... see docs

    // Custom Globals
    "globals" : {
        "Highcharts"  : false //here is what you need
    }
}

See http://jshint.com/docs/

Answer 2

Here is jshintrc option in Grunt config, that u probably missed.

grunt.initConfig({
    jshint: {
        options: {
            jshintrc: true
        }
    }
});