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

1 Answer 1


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

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

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.