Smartwave Porto theme shows an error like this in browser console and my page does not load properly

I’m using Smartwave Porto theme for my Magento 2 website. When I load my website for the first time it’s loading properly, but every time I refresh the browser page it will show an error like this in browser console and my page does not load properly:

Uncaught TypeError: $(...).swMegamenu is not a function
Uncaught TypeError: $(...).stellar is not a function
Uncaught TypeError: $(...).owlCarousel is not a function
Uncaught TypeError: $.widget is not a function

Uncaught TypeError: $(...).swMegamenu is not a function

Uncaught TypeError: $(...).stellar is not a function

Uncaught TypeError: $(...).owlCarousel is not a function

Uncaught TypeError: $.widget is not a function

I just do below changes :

Create a requirejs-config.js in the root of the child theme (you can also do this on root theme if you have not created a child theme) as per Porto child like this:

app/design/frontend/Smartwave/porto_child and add the following code in it:

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']
            }
    }
};

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 also change child theme layout file at:

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

From:

<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" />

I don’t need the fancybox, So I have turned it off, but if you require it, I guess it should be included in the requirejs as well. If you face the same issue, follow the above steps to solve it.

Are you having any query with your Magento store?
Fill the form below to hire Magento expert(s).

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-63e08eee371ce887815792/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Hire B. Darji

Let’s have a call

Fill the form & Get Installation Support