I have written a js file which is like.

 $(document).ready(function(){  $('#test').click(function(){
>      Alert('coming'); }) })

I have created a custom theme which is based on luma and I have added that js file under namespace/theme/web/js and also included that js in Magento_Theme layout default_head_block.xml but it gives error $ is undefined.

Can someone suggest me how can I include that file


This is used for M2 2.1.7 This will help you. Reminder this is an example. For default header block add following script

 <script src="requirejs/require.js"/>

I have used slick slider, so create a js file "requirejs-config.js" inside ur theme folder. then add following code. eg. I have used slick.

var config = {
    map: {
        '*': {
              'slick.min': 'js/slick.min',            

I have added slick.min.js to web/js folder

then your custom.js file

require(['jquery', 'slick.min'], function ($) {

slick is my slider. this code for example, you can use this and do experiment. run php bin/magento setup:upgrade and then deploy

| improve this answer | |
  • please try to do without require.js then require(['jquery'], function ($) { $(document).ready(function(){ alert(); }); }) – Lasantha Feb 7 '18 at 17:21
  • @Karan Adhikari - did you try . – Lasantha Feb 8 '18 at 3:59
  • How would I include custom.js, from xml or there is another way to do so? – Karan Adhikari Feb 8 '18 at 4:45
  • after<script src="requirejs/require.js"/> <script src="js/camlab.js"/> – Lasantha Feb 8 '18 at 5:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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