8

I am trying to add custom jquery code into my module but it is not working.

app/code/Custom/Module/view/frontend/web/js/my.js

jQuery.noConflict();
jQuery(document).ready(function(){
    alert('ok');
});

app/code/Custom/Module/view/frontend/layout/default.xml

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Custom_Module::js/my.js"/>
    </head> 
</page>

In console, I am getting the error message

ReferenceError: jQuery is not defined

How to fix this issue.

5
  • 2
    if using Requirejs, shouldn't use jQuery document ready: stackoverflow.com/questions/15332628/… Jan 13, 2017 at 13:05
  • You should avoid adding JS this way, you should use Require JS within M2.
    – Ben Crook
    Jan 13, 2017 at 16:45
  • @KhoaTruongDinh great info Jan 27, 2017 at 8:00
  • @Anshu Mishra did you manage to solve this?
    – vbak
    May 16, 2017 at 18:32
  • @vbak I have already posted my answer. May 17, 2017 at 4:53

4 Answers 4

18

Magento2 use requirejs concept (lazy load) so load jquery first then write your jquery code.

e.g)

require(['jquery'],function($){

    $(document).ready(function(){

       alert('ok');

    });

});
2
  • 1
    Using above code, I am getting TypeError: require is not a function Jan 16, 2017 at 4:32
  • @AnshuMishra same thing is happening with me do you have any solution?? Feb 1, 2023 at 13:14
7

The issue was that there is no sequence tag defined in the module.xml.
I have added Magento_Theme module in the sequence tag in my module.xml as follows

<sequence>
    <module name="Magento_Theme"/>
</sequence>

Secondly, I have added requirejs-config.js in my module's web directory.

var config = {
    map: {
        '*': {
            my: 'Custom_Module/js/my',
        }
    }
};

Third, I have modified the content of my js file as follows :

define('js/theme',['jquery', 'domReady!'], function(jQuery){
    alert('ok');
});
6

We need to use Requirejs to load the jQuery dependency. Your js should be:

app/code/Custom/Module/view/frontend/web/js/my.js

require([
    "jquery"
], function ($) {

   // your code here

});
3
  • Using above code, I am getting TypeError: require is not a function Jan 16, 2017 at 4:32
  • Try to add the js in default_head_blocks.xml Jan 16, 2017 at 4:36
  • Still getting the same error message, TypeError: require is not a function Jan 16, 2017 at 4:54
0

I had the same problem. Yesterday everything worked just fine but the next day I suddenly get "ReferenceError: jQuery is not defined"

I did no changes, I even checked out an older commit where everything worked fine. It was because of a script which was not wrapped in require(['jquery', 'domReady!'], function($){ ... even though the same script worked yesterday without it. Very strange.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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