ERROR TypeError: Cannot set property 'proceed' of undefined

Question

I'm trying to draw some charts using Highcharts Javascript charting engine, I have it all set up, it works fine in my local development environment, but when I deploy it to Gitlab and access it, it is giving me the following error:

ERROR TypeError: Cannot set property 'proceed' of undefined
    at t.<computed> (main-es2015.7538dcc357c548058d75.js:1)
    at Object.<anonymous> (main-es2015.7538dcc357c548058d75.js:1)
    at Object.t.<computed> [as arc] (main-es2015.7538dcc357c548058d75.js:1)
    at A.getPlotBandPath (main-es2015.7538dcc357c548058d75.js:1)
    at s.renderBackground (main-es2015.7538dcc357c548058d75.js:1)
    at s.render (main-es2015.7538dcc357c548058d75.js:1)
    at main-es2015.7538dcc357c548058d75.js:1
    at Array.forEach (<anonymous>)
    at t.each (main-es2015.7538dcc357c548058d75.js:1)
    at t.Chart.<anonymous> (main-es2015.7538dcc357c548058d75.js:1)

I am trying to get my Gitlab commits from my public projects in order to analyze the number of commits from a specific language or library and place them in a chart so that the user can see the difference.

I have googled this error and I have found very similar ones, but none of them has been the solution to my problem. I also tried looking for the property proceed in my platform, but it looks like it is something that highcharts is running or calling when executing.

I'm using this to build the component:

if (this.data.gitlab) {
      this.seriesData.push({
        name: 'GitLab',
        y: this.data.gitlab,
        color: '#e24329',
        radius: `${radius}%`,
        innerRadius: `${radius - 7}%`
      });
      this.seriesBackgrounds.push({
        outerRadius: `${radius}%`,
        innerRadius: `${radius - 7}%`,
        borderWidth: 0
      });
    }

And this to create the chart:

this.skillChart = new Chart(<any>{
      chart: {
        type: 'solidgauge',
        spacing: [0, 0, 0, 0],
        backgroundColor: 'transparent',
        borderColor: 'transparent'
      },
      title: null,
      pane: {
        center: ['50%', '80%'],
        size: '130%',
        startAngle: -90,
        endAngle: 90,
        background: this.seriesBackgrounds
      },
      credits: {
        enabled: false
      },
      yAxis: {
        min: 0,
        max: this.maxScore,
        gridLineWidth: 0,
        lineWidth: 0,
        minorGridLineWidth: 0,
        minorTickWidth: 0,
        tickWidth: 0,
        labels: {
          enabled: false
        }
      },
      tooltip: {
        borderWidth: 0,
        followPointer: true,
        pointFormat: '<span style="color:{point.color}">\u25CF</span> {point.name}: <b>{point.y}</b><br/>',
        shared: true,
        useHTML: true
      },
      series: [
        {
          animation: {
            duration: 1500
          },
          dataLabels: {
            enabled: false
          },
          data: this.seriesData
        }
      ]
    });

When I run the platform I expect to see a chart showing a semi-circular bar with the number of commits with 10 as the top, which is just what I get when I run the platform in my local environment.

But instead, when I run from the deployed Gitlab platform, I get the component but the chart does not draw the semicircle.

I have not enough reputation to post the images, otherwise, it would have been easier for people to see what I mean.

Answer 1

I've fallen in the very same issue. My observation: I'm using Highcharts JS v6.1.4 (2018-09-25) installed with NPM via angular-highcharts.

When debugging the code is breaking in the minified code related to this fragment of highcharts.src.js:

/**
 * Wrap a method with extended functionality, preserving the original function.
 *
 * @function Highcharts.wrap
 *
 * @param {*} obj
 *        The context object that the method belongs to. In real cases, this is
 *        often a prototype.
 *
 * @param {string} method
 *        The name of the method to extend.
 *
 * @param {Function} func
 *        A wrapper function callback. This function is called with the same
 *        arguments as the original function, except that the original function
 *        is unshifted and passed as the first argument.
 */
H.wrap = function (obj, method, func) {
    var proceed = obj[method];
    obj[method] = function () {
    var args = Array.prototype.slice.call(arguments),
        outerArgs = arguments,
        ctx = this,
        ret;
        ctx.proceed = function () {
            proceed.apply(ctx, arguments.length ? arguments : outerArgs);
        };
        args.unshift(proceed);
        ret = func.apply(this, args);
        ctx.proceed = null;
        return ret;
    };
};

The minified code, formated, is like this:

a.wrap = function(a, h, e) {
    var m = a[h];
    a[h] = function() {
        var a = Array.prototype.slice.call(arguments)
            , p = arguments
            , u = this;
        u.proceed = function() {
            m.apply(u, arguments.length ? arguments : p)
        }
        ;
        a.unshift(m);
        a = e.apply(this, a);
        u.proceed = null;
        return a
    }
}
;

I've deployed in 2 environments; in one of them, the code works, but it does not in the other. In the failing one, I debugged and this variable is unassigned when reaching the assignment: u = this therefore an error is raised in the next line: u.proceed = function() {.

In my other environment, this has Window as value, which has a proceed attribute, and then everything works fine.

I have not figured out why this is happening so far.

I hope this can help somehow.

Edit: Upgrading angular-highcharts to 8.0.3 version and highcharts to 7.2.0 version fixed the issue for me :)