Magento – Magento 2: Why I’m getting JS errors after removing browser cache

javascriptknockoutmagento2

I'm using Magento 2 Porto theme and I relocate the position of some header elements like language selector etc. its working fine sometimes but after removing the browser cache its showing following js errors:

SCRIPT438: Object doesn't support property or method 'widget'

SCRIPT438: Object doesn't support property or method 'stellar'

HTTP404: NOT FOUND – The server has not found anything matching the requested URI (Uniform Resource Identifier).

SCRIPT5007: Unable to get property 'timepicker' of undefined or null reference

SCRIPT438: Object doesn't support property or method 'swMegamenu'

SCRIPT438: Object doesn't support property or method 'owlCarousel'

when I refresh it again then all the errors were gone and the page works fine once again. On the Internet Edge its showing JS errors all the time. I tried to upload the backup files but still seeing the same issue. Any one can help me to fix this issue

Thanks!

Best Answer

This is a known error in the Porto theme (see more here https://themeforest.net/item/porto-ultimate-responsive-magento-theme/9725864/comments?page=141) , if you don't have experience with RequireJS it's best if you ask assistance from the theme developer.

The error is trown because of incorrect Javascript use in the static blocks used by the Porto theme. You should check all the JS resources in the static blocks and pages (for example, the homepage and all the Owl sliders).

Markup should be like this (owl slider example):

        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            $("#featured_product .owl-carousel").owlCarousel({
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                margin: 10,
                nav: true,
                navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
                dots: false,
                navRewind: true,
                animateIn: 'fadeIn',
                animateOut: 'fadeOut',
                loop: true,
                responsive: {
                    0: {
                        items:2
                    },
                    768: {
                        items:3
                    },
                    992: {
                        items:4
                    },
                    1200: {
                        items:5
                    }
                }
            });
        });

Example RequireJS file (app/design/frontend/Vendor/Theme/requirejs-config.js):

var config = {
    paths: {
        'owl':                  'Magento_Theme/owl.carousel/owl.carousel',
        'stellar':              'Magento_Theme/js/jquery.stellar.min'

    },
    shim: {
        'owl': {
            deps: ['jquery']
        },
        'stellar': {
            deps: ['jquery']
        }
   }
};

Reading material:

Related Topic