4

I create a module for Magento 2 to add a custom javascript to the theme head but my custom js file is loaded in front off all javascript files and this come with the error:

ReferenceError: jQuery is not defined

enter image description here

I add my file here:

app/code/MyModule/Customjs/view/frontend/web/js/custom.js

I create requirejs-config.js file here

app/code/MyModule/Customjs/view/frontend/

var config = {
    map: {
        '*': {
            custom: 'MyModule/Customjs/js/custom'
        }
    }
};

I add app/code/MyModule/Customjs/view/frontend/layout/default.xml

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

What is wrong?

Thank you

  • Where do you want to call above js? – Rakesh Jesadiya Nov 28 '17 at 10:30
4

Remove default.xml, By declaring js in head you are calling your custom js before query loaded, So remove this code and call custom js from your custom template.

Try this code in app/code/VendorName/ModuleName/view/frontend/requirejs-config.js

var config = {
    paths: {
            'custom': 'MyModule/Customjs/js/custom'     
    },
    shim: {
            'custom': {
                deps: ['jquery']
            }
    }
};

Use this code into your custom template to call your custom js:

<script  type="text/javascript">       
    require([
        'jquery', 
        'custom'
    ], function($, Custom){
        $(function(){
        })
    });
</script>

Note: You need to set dependency for your Custom js with jquery.

| improve this answer | |
  • Hi thanks but is the same like before, the custom file is in the same place, I mean in front of all js files – Robert Nov 28 '17 at 10:05
  • you need not to call this js file from default.xml instead of that you can use it in your custom template while you need to call your custom js. – Ronak Chauhan Nov 28 '17 at 10:06
  • can you help me a little? how I can call the phtml block in the default.xml file for my custom module? – Robert Nov 28 '17 at 10:22
  • no need to call default.xml file in your custom module. If you want to call your custom js you can place it in any your custom template file if you are using it – Ronak Chauhan Nov 28 '17 at 10:25
  • but I need this phtml file to be a part of my module, because I need to move it to other sites, for that I need to call this block – Robert Nov 28 '17 at 10:26
2

You need to pass dependency for it to load jquery first. please replace your requirejs-config.js file code with below one,

app/code/MyModule/Customjs/view/frontend/requirejs-config.js

var config = {
    paths: {
        'custom': 'MyModule/Customjs/js/custom'
    },
    shim: {
        'custom': {
            deps: ['jquery']
        }
    }
}

Remove js declartion from default.xml file.

You can call your js file in any page using below way,

<script>       
    require(['jquery','custom'], function($, custom){
        // call custom object code
    });
</script>

Or if you want to call above file in all page you have to keep above script inside header.phtml file of module-theme folder.

Run Deployment command to work successfully.

Deploy your content and check again.

| improve this answer | |
  • thank you but it's the same, the custom.js is the same in the front off all files and with the same error – Robert Nov 28 '17 at 9:59
  • I have updated answer please update your code and run below command, php bin/magento setup:upgrade php bin/magento setup:static-content:deploy – Rakesh Jesadiya Nov 28 '17 at 10:01
  • is the same, and the same error – Robert Nov 28 '17 at 10:04
  • could you please clear browser cache? – Rakesh Jesadiya Nov 28 '17 at 10:05
  • I use another browser, I clear the cache, and in chrome for example I have this error: Uncaught ReferenceError: jQuery is not defined – Robert Nov 28 '17 at 10:06

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.