0

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 #1

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
    }
}
};

Update #2

Error in var/log/debug.log

[2021-05-18 12:17:19] main.ERROR: Unable to resolve the source file for 'frontend/Vendor/Theme/sv_SE/js/jquery.fancybox.min/js/jquery.fancybox.min.js' [] []
[2021-05-18 12:17:19] main.CRITICAL: Unable to resolve the source file for 'frontend/Vendor/Theme/sv_SE/js/jquery.fancybox.min/js/jquery.fancybox.min.js' [] []

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

Thank you

5
  • 1
    Can you share the relevant requirejs-config file(s) please?
    – Ben Crook
    May 12 at 7:21
  • Thank you very much for your input @Ben Crook, I have now updated the post with content and path of requirejs-config.js.
    – Alldo
    May 12 at 9:21
  • 1
    Damn, I was hoping to see an obvious issue there but it appears to be ok
    – Ben Crook
    May 12 at 14:33
  • @Alldo, Try to move fancy box js in Magento_Theme directory and then replace paths line: "fancybox":"Magento_Theme/js/jquery.fancybox.min". Exact path for move fancybox js: Magento_Theme/web/js/jquery.fancybox.min.js
    – Amit Saini
    May 18 at 17:37
  • Is it possible that you have Minify JavaScript Files configured differently for certain stores?
    – jiheison
    May 21 at 1:31
1

Include your module name in the path:

...
paths: {
    'fancybox': 'Vendor_Theme/js/jquery.fancybox.min'
},
...

An example from core code: https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Cookie/view/base/requirejs-config.js#L8

var config = {
    paths: {
        'jquery/jquery-storageapi': 'Magento_Cookie/js/jquery.storageapi.extended'
    }
};

Good luck!

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.