Question

I have a really strange problem. We load a JS file in before.body.end in a multistore setup, like this:

\app\design\frontend\Vendor\Theme\Magento_Theme\layout\default.xml

    <referenceContainer name="before.body.end">
        <block class="Magento\Framework\View\Element\Template" template="Magento_Theme::js/js.phtml" name="module_js"/>
    </referenceContainer>

\app\design\frontend\Vendor\Theme\Magento_Theme\templates\js\js.phtml

<script type="text/javascript" defer="defer">
require(['jquery', 'fancybox', 'domReady!'],
    function($, fancybox, doc) {
        jQuery.noConflict();
        var fancyboxExample = {
            openModal: function() {
                $.fancybox.open(this.$modal);
            },
            closeModal: function() {
                $.fancybox.close(true);
            }
        };
    });
</script>

This works perfect, but for some store views, the path is wrong when checking the console:

*Error message in web browser console:
Failed to load resource: the server responded with a status of 404 ()*

The path to the JS file gets duplicated with js/jquery.fancybox.min for some stores: /static/version1620396352/frontend/Vendor/Theme/sv_SE/js/jquery.fancybox.min/js/jquery.fancybox.min.js

All store views are sharing the same parent theme, where this JS include is being made. We use versioning and version1620396352 is working as expected. If we remove js/jquery.fancybox.min/js from the path above in the browser, the script is loaded correctly.

Update

Content in \app\design\frontend\Vendor\Theme\requirejs-config.js

var config = {
paths: {
    'fancybox':'js/jquery.fancybox.min'
},
shim: {
    'fancybox': {
        deps: ['jquery'] //gives your parent dependencies name here
    }
}
};

I would really appreciate is someone could be kind and shed some light on this.

Thank you

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top