Magento 2.4.2 - Strange problem with JS path in a multistore environment

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

Answer 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!