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
    Commented Feb 29, 2020 at 1:36
  • Thanks @Taschert, its worked
    – Manjunath
    Commented Mar 2, 2020 at 6:49

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.