0

I am trying to load 2 third party js files in my module,

Followed below steps.

Vendor/Module/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

<body>
    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Template" 
            name="mobile-megamenu.file" 
            before="-" 
            template="Vendor_Module::custom.phtml"
        />
    </referenceContainer>  
</body>

Vendor/Module/view/frontend/templates/custom.phtml

<div id="dl-menu" class="dl-menuwrapper">
                    <button class="dl-trigger">More</button>
                    <ul class="dl-menu">
                        <li>
                            <a href="#" class="levelTwo">Test</a>
                            <ul class="dl-submenu">
                             <li>Test </li>
                              <li>Test </li>
                               <li>Test </li>
                                <li>Test </li>
                    </ul>
                 </div>

<script>    
    require([
        "jquery",
        "dlmenu",
        "modernizr"
    ], function ($) {

       $(document).ready(function(){

           $( '#dl-menu' ).dlmenu({
                    animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
            });           
            $("button.dl-trigger").click(function(){
                $("ul.extra-links").toggle();
            });
        });
    }); 

 </script>

Vendor/Module/view/frontend/requirejs-config.js

var config = {
   map: {
      '*': {
      dlmenu: 'Vendor_Module/js/jquery.dlmenu',
      modernizr:'Vendor_Module/js/modernizr.custom'
     }
   }
};

I have Moved both the js files here,

app/code/Vendor/Module/view/frontend/web/js/

I am getting the following errors in console.

require.js:166 Uncaught Error: Script error for: dlmenu.

Uncaught ReferenceError: Cannot read property 'prefixed' of undefined

Can someone help me on this please. Thanks!!

Improve this question

1 Answer 1

Reset to default
2

I think you have an issue with your requirejs-config.js file, it should be : 

var config = {
    paths: {
        dlmenu: 'Vendor_Module/js/jquery.dlmenu',
        modernizr:'Vendor_Module/js/modernizr.custom'
    },
    shim: {
        "dlmenu": ["jquery"],
    }
};

You can use deps instead of paths depending on your need. Shim is used to load jquery before dlmenu.

Improve this answer
2
  • Hi @Taschert, thanks for the answer, okay I will check it, have u tried it? I have treis it before but didn't work for me
    – Manjunath
    Feb 29, 2020 at 1:36
  • Thanks @Taschert, its worked
    – Manjunath
    Mar 2, 2020 at 6:49

Your Answer

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

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