7

I'm using Smartwave Porto theme for my Magento 2 website, when I load my website for the first time in browser console it shows no error at all, but every time I refresh the browser page by pressing F5 or CTRL+SHIFT+R, it will show an error like this in browser console and my page not load properly because of this:

error

1 Answer 1

11
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

If you suffer the same, do this:

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.

6
  • thanks it's working, but what cause this problem to be exact? Feb 23, 2018 at 6:28
  • You are welcome. Glad to hear that it helped you. The problem was that menu JavaScript was being loaded before jQuery. So we defined dependency of that menu JS. Feb 23, 2018 at 6:35
  • Hello @KishanPatadia I have the same issue with porto theme. I used this code which is working fine. But after this solution product page is showing error ( zoom is not a function ) Feb 23, 2018 at 6:50
  • @KishanPatadia there's a problem, when i go to product page i got an error saying: $(...).zoom is not a function Feb 26, 2018 at 2:20
  • $(...).zoom is not a function is an issue with another call to a js library that hasn't been added to the require js file. I don't have that library call on the site i'm working on, so i can't give a code solution to your case, but looking at @KishanPatadia example, you should be able to find the library for zoom and add it to the require js file. In my case, i had to add fancybox to mine with 'fancybox/js/jquery.fancybox': { deps: ['jquery'] } and that cleaned up all my issues.
    – circlesix
    Feb 28, 2018 at 14:19

Not the answer you're looking for? Browse other questions tagged or ask your own question.