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.
-
2if using Requirejs, shouldn't use jQuery document ready: stackoverflow.com/questions/15332628/…Khoa Truong– Khoa Truong2017年01月13日 13:05:37 +00:00Commented Jan 13, 2017 at 13:05
-
You should avoid adding JS this way, you should use Require JS within M2.Ben Crook– Ben Crook2017年01月13日 16:45:59 +00:00Commented Jan 13, 2017 at 16:45
-
@KhoaTruongDinh great infoBilal Usean– Bilal Usean2017年01月27日 08:00:56 +00:00Commented Jan 27, 2017 at 8:00
-
@Anshu Mishra did you manage to solve this?vbak– vbak2017年05月16日 18:32:56 +00:00Commented May 16, 2017 at 18:32
-
@vbak I have already posted my answer.Anshu Mishra– Anshu Mishra2017年05月17日 04:53:54 +00:00Commented May 17, 2017 at 4:53
4 Answers 4
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');
});
});
-
1Using above code, I am getting TypeError: require is not a functionAnshu Mishra– Anshu Mishra2017年01月16日 04:32:23 +00:00Commented Jan 16, 2017 at 4:32
-
@AnshuMishra same thing is happening with me do you have any solution??Suraj Prajapat– Suraj Prajapat2023年02月01日 13:14:10 +00:00Commented Feb 1, 2023 at 13:14
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');
});
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
});
-
Using above code, I am getting TypeError: require is not a functionAnshu Mishra– Anshu Mishra2017年01月16日 04:32:29 +00:00Commented Jan 16, 2017 at 4:32
-
Try to add the js in
default_head_blocks.xmlKhoa Truong– Khoa Truong2017年01月16日 04:36:29 +00:00Commented Jan 16, 2017 at 4:36 -
Still getting the same error message, TypeError: require is not a functionAnshu Mishra– Anshu Mishra2017年01月16日 04:54:04 +00:00Commented Jan 16, 2017 at 4:54
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.