获取'未捕获的类型错误：无法读取未定义的属性'帮助者''答案

【问题标题】：Getting 'Uncaught TypeError: Cannot read property 'helpers' of undefined'获取'未捕获的类型错误：无法读取未定义的属性'帮助者''
【发布时间】：2019-10-04 09:15:08
【问题描述】：

我有一些 javascript 代码，其中加载了多个 javascript 文件和库。

chartjs
chartjs-plugin-datalabels
chartjs-plugin-datatables

在大多数情况下，加载这些文件没有问题。

但有时我会收到“未捕获的类型错误：无法读取未定义的属性 'helpers'”

我认为有时 Chart.js 没有完全加载。那么如何确保 Chart.js 已加载，然后加载我的依赖脚本？

chartjs-plugin-datalabels 抛出的错误：

chartjs-plugin-datalabels.js?_=1570176417056:15 Uncaught TypeError: Cannot read property 'helpers' of undefined
    at chartjs-plugin-datalabels.js?_=1570176417056:15
    at chartjs-plugin-datalabels.js?_=1570176417056:10
    at chartjs-plugin-datalabels.js?_=1570176417056:11

这是我加载所有 javascript 文件的方式：

Promise.all([loadChartJS(), loadOtherScripts(), loadCss()])
    .then(() => {
        //do something with loaded files.
    });




function loadChartJS() {
    return new Promise((resolve, reject) => {
        dependentScripts = [
            libs/chartjs.min.js,
            libs/someLib.js,
            libs/anotherLib.js,
        ];
        for (var i in dependentScripts) {
            $.getScript(dependentScripts[i]).done(function(script, textStatus) {
                resolve();
            })
        }

    });
}

function loadScripts() {
    return new Promise((resolve, reject) => {
        listOfScripts = [
            libs/datatables.min.js,
            libs/chartjs-plugin-datalabels.js,
             ... some other files
        ];

        var stage = 0;
        for (let e in listOfScripts) {
            $.getScript(listOfScripts[e])
                .done(function(script, textStatus) {
                    stage++;
                    if (stage == listOfScripts.length) {
                        resolve();
                    }
                })
                .fail(function(jqxhr, settings, exception) {
                    reject(jqxhr);
                });
        }
    });
}

【问题讨论】：

标签： javascript dependencies chart.js

【解决方案1】：

似乎在这两种情况下，当dependentScripts 和listOfScripts 中的第一个元素被加载时，而不是在所有元素都被加载时，您都在解析单个 Promise。即，在解决 Promise 之前，您无需等待所有 dependentScripts 和 listOfScripts。

【讨论】：

我已经尝试在stage == listOfScripts.length 时解决承诺，如上所示。我还在loadChartJS 中更改了这种方法。它似乎奏效了。但是错误再次随机发生。这种情况推荐使用requirejs还是webpack？

【解决方案2】：

我想我已经找到了一个加载依赖脚本的解决方案。所以只有在解析chartjs时才会加载插件DataLabels。

$.when(
    $.getScript(`libs/chartjs.min.js`),
    $.Deferred(function(deferred) {
        $(deferred.resolve);
    })
).done(function() {
    $.getScript(`libs/chartjs-plugin-datalabels.js`)
    //Load other scripts
    Promise.all([loadScripts(), loadCss()])
        .then(() => {

            //do stuff ...

        });
});

【讨论】：