Magento2 – How to Include Third-Party Javascript Using requirejs

jquerymagento2requirejs-config.js

I tried to include a Jquery lightbox script (Ekko Lightbox) in one of my Magento 2 CMS pages. But when I click on the trigger links to display a video, nothing seems to happen in the browser, but looking at the console, I see the following error: "No template was found by selector: null".

As far as I can tell, the appropriate JQuery and lightbox scripting is being loaded correctly so I think the problem is with how I'm calling the script in the CMS page:

<script>
require(["jquery","ekkolightbox","domReady!"], (function($){
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    });
}));
</script>

…and then, in the content of the page, the script is called with this kind of markup:

<a class="btn btn-sm btn-outline-secondary stretched-link" href="xxxx" target="_blank" data-toggle="lightbox">View</a>

UPDATE:
It was suggested that the lightbox scripts need to be added to the requirejs-config file, which I did. But I'm not sure that it's added correctly. Here's the contents of the requirejs-config file:

var config = {
    paths: {
            'bootstrap':'Magento_Theme/js/bootstrap.bundle',
            'ekkolightbox':'Magento_Theme/js/ekko-lightbox',
    } ,
     map: {
        '*': {
            'ekkolightbox': 'js/ekko-lightbox'
        }
    },
    shim: {
        'bootstrap': {
            'deps': ['jquery']
        },
        'ekkolightbox': {
            'deps': ['bootstrap']
        }
    }
};

I don't understand this error or what I might do to fix it. What is going on here and how can I troubleshoot?

Best Answer

I think you have to either map the lightbox js file in requirejs-config file or put full relative path to the js file without the extension and relative to theme/web folder

Related Topic