Magento 2x child theme js error

Question

I have created child theme for magento 2x and it's parent theme is porto theme. After create child theme everthing is working fine but sometime I have got the following error.

Uncaught TypeError: $.ui is undefined 
Uncaught TypeError: owl.owlCarousel is not a function 
Uncaught TypeError: $(...).swMegamenu is not a function
Uncaught TypeError: $(...).owlCarousel is not a function
Uncaught TypeError: Cannot read property 'timepicker' of undefined

I am not sure why I am getting these error randomly. I have also tried -> Why is js breaking with requirejs in templates on Magento 2 and how to fix? but not working.

Any suggestions would be appreciated

Answer 1

Create a requirejs-config.js in the root of the child theme

app/design/frontend/Smartwave/porto_child and put in the following:

var config = {
    shim: {
        jquery: {
            exports: '$'
        },
        'Smartwave_Megamenu/js/sw_megamenu':
            {
                deps: ['jquery']
            }, 
        'owl.carousel/owl.carousel.min':
            {
                deps: ['jquery']
            },
        'js/jquery.stellar.min': 
            {
            deps: ['jquery']
            },
        'js/jquery.parallax.min':
            {
            deps: ['jquery']
            }
    }
};

And change the entries:

<script src="jquery.js" />
<script src="bootstrap/js/bootstrap.min.js" />
<script src="fancybox/js/jquery.fancybox.js" />

To:

<remove src="jquery.js" />
<remove src="bootstrap/js/bootstrap.min.js" />
<remove src="fancybox/js/jquery.fancybox.js" />

Within file:

app/design/frontend/Smartwave/porto_child/Magento_Theme/layout/default_head_blocks.xml

No more need for merging javascripts, no more javascript errors! I have no need for the fancybox, turned it off, but if you do require it, I guess it should be included in the requirejs as well.