间歇性未捕获类型错误:无法读取未定义的 RequireJS 优化器猫头鹰旋转木马的属性“fn”

问题描述

Magento 2 并将 JS 与 RequireJS 优化器捆绑在一起。初始化 owl carousel 滑块时,JavaScript 中断会出现间歇性问题。我在我的 requirejs-config.js 文件中依赖 jquery,如下所示:

var config = {
    map: {
        '*': {
            'owlcarousel': 'Harrigo_CategoryWidget/js/owl.carousel','listSlider': 'Harrigo_CategoryWidget/js/list-slider',}
    },shim: {
        'owlcarousel': {
            deps: ['jquery'],exports: '$'
        }
    }
};

然后使用 data-mage-init 属性初始化像这样的小脚本,然后使用 owlCarousel:

define(['jquery','owlcarousel'
],function($){ 
    'use strict';
    
    return function (config) {
        if($(config.class).length) {
            var related = $(config.class).owlCarousel({
                loop:false,margin:10,nav:true,autoplay:false,autoplayTimeout:5000,navText : ["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"],autoplayHoverPause:true,responsive:{
                    0:{
                        items:1
                    },767:{
                        items:4
                    }
                }
            });

            related.on('changed.owl.carousel',function(event) {
                setTimeout(function(){ $(window).trigger('load'); },200);
            })
        }
    }
});

直到最近,当我注意到控制台显示时,大约十分之一的间歇性失败时,这些似乎都运行良好:

shared.js:formatted:12960 Uncaught TypeError: Cannot read property 'fn' of undefined.

e.fn.owlCarousel = function(t) {
    var i = Array.prototype.slice.call(arguments,1);
    return this.each((function() {
        var n = e(this),a = n.data("owl.carousel");

不太确定如何调试或“e”应该是什么以及为什么它随机失败对我来说很感激任何关于如何解决的建议。

这里有问题的站点示例(可能需要刷新或打开检查元素它确实做到了...至少对我来说大约 10 次中有 1 次):

https://testingb.buzzcateringsupplies.com/

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)