Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Magento 2 theme JQuery stops working after installing module

SOLVED
Go to solution
‎08-15-2018 02:34 AM
‎08-15-2018 02:34 AM

Magento 2 theme JQuery stops working after installing module

Hello,

 

I am working on a Magento 2 site and for this site I need a certain shipment provider module. Whenever I install this module, none of the .js files and JQuery like the slider etc. are not displaying anymore. The browser developer tools are full of;

 

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

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

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

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

 

And in the exception log I see this;

 

Unable to get content for 'frontend/Smartwave/porto_child/en_US/Module_Name/js/module-file.js' {"exception":"[object] (Magento\\Framework\\View\\Asset\\File\\NotFoundException(code: 0): Unable to get content for 'frontend/Smartwave/porto_child/en_US/Module_Name/module-file.js' at /home/yczswebh/public_html/vendor/magento/framework/View/Asset/File.php:186)"} []

 

The module developer has not been super helpful so far so I was hoping one of you may have a solution to my problem.

Labels:
0 Kudos
1 ACCEPTED SOLUTION

Accepted Solutions
‎08-15-2018 04:05 AM
‎08-15-2018 04:05 AM

Re: Magento 2 theme JQuery stops working after installing module

Hello @m_w1,

 

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.

 

Let us know if you get trouble with it.

 

 

 

--
If you've found one of my answers useful, please give "Kudos" or "Accept as Solution"

 

View solution in original post

13 REPLIES 13
‎08-15-2018 04:05 AM
‎08-15-2018 04:05 AM

Re: Magento 2 theme JQuery stops working after installing module

Hello @m_w1,

 

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.

 

Let us know if you get trouble with it.

 

 

 

--
If you've found one of my answers useful, please give "Kudos" or "Accept as Solution"

 

‎08-15-2018 05:26 AM
‎08-15-2018 05:26 AM

Re: Magento 2 theme JQuery stops working after installing module

Hello @gelanivishal

 

Thank you for your reply.

 

I have tried this before but I don't have the directory Magento_Theme in app/design/frontend/Smartwave/porto_child/

0 Kudos
‎08-15-2018 05:44 AM
‎08-15-2018 05:44 AM

Re: Magento 2 theme JQuery stops working after installing module

@m_w1

 

Where did you find it?

 

Thank you.

0 Kudos
‎08-15-2018 05:52 AM
‎08-15-2018 05:52 AM

Re: Magento 2 theme JQuery stops working after installing module

@gelanivishal

 

Sorry can you be more specific? Where did I find what?

0 Kudos
‎08-15-2018 06:04 AM
‎08-15-2018 06:04 AM

Re: Magento 2 theme JQuery stops working after installing module

@m_w1

 

Please create this as per directory 

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

and add below content in it.

 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="jquery.js" />
        <remove src="bootstrap/js/bootstrap.min.js" />
        <remove src="fancybox/js/jquery.fancybox.js" />
    </head>
</page>
‎08-15-2018 06:28 AM
‎08-15-2018 06:28 AM

Re: Magento 2 theme JQuery stops working after installing module

@gelanivishal

 

I have tried this and it did not work.

0 Kudos
‎08-15-2018 10:08 PM
‎08-15-2018 10:08 PM

Re: Magento 2 theme JQuery stops working after installing module

Kindly refer below blogs for resoled your jquery error,

https://www.rakeshjesadiya.com/how-to-resolve-uncaught-referenceerror-jquery-is-not-defined-anonymou...

 

You need to run deployment command after set jquery in requirejs-config.js file.

If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial
‎08-16-2018 03:05 AM
‎08-16-2018 03:05 AM

Re: Magento 2 theme JQuery stops working after installing module

Hello @Rakesh Jesadiya

 

Thank you for your suggestion!

 

This is very new to me and I would appreciate a bit of clarification if possible.

 

One of the errors is 'Uncaught TypeError: $(...).swMegamenu is not a function' which I found the file sw_megamenu.js in app/code/Smartwave/Megamenu/view/frontend/web/js

 

I have followed your steps and now have a requirejs-config.js file in my theme directory. 

 

app/design/frontend/Smartwave/porto_child

 

The file looks like this 

 

var config = {
paths: {
'swMegamenu': 'Smartwave_Megamenu/js/sw_megamenu.js'
},
shim: {
'swMegamenu': {
deps: ['jquery'] //gives your parent dependencies name here
}
}
};

 

I have deployed content again and cleared cache but it still gives errors, did I do something wrong?

0 Kudos
‎08-16-2018 03:20 AM
‎08-16-2018 03:20 AM

Re: Magento 2 theme JQuery stops working after installing module

You need to create requirejs-config.js file at below location.

app/code/Smartwave/Megamenu/view/frontend/requirejs-config.js

If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial