Magento2. Use non AMD javascript scripts

Question

I am trying to load an external javascript in my Magento 2.1.x installation in this way:

    <script type="text/javascript">

        var _iub = _iub || [];
        _iub.csConfiguration = {
            siteId: xxx,
            consentOnScrollDelay : 1500,
            callback: {
                onConsentGiven: function(){
                    dataLayer.push({'event': 'iubenda_consent_given'});
                }
            },
            cookiePolicyId: xxx,
            lang: "it",
            banner: {
                fontSize: "13", applyStyles: false,
                html:"Privacy policy HTML"
            }
        };
    </script>
    <script type="text/javascript" src="//cdn.iubenda.com/cookie_solution/safemode/iubenda_cs.js" charset="UTF-8" async></script>

Including the script //cdn.iubenda.com/cookie_solution/safemode/iubenda_cs.js breaks all the other javascript requirejs functionalities.

I tried to include the script in the requirejs way, editing my theme requirejs-config.js file:

var config = {
    "map" : {
        "*" : {
            ...
            'iubenda' : '//cdn.iubenda.com/cookie_solution/safemode/iubenda_cs.js'
        }
    }
};

and changing its inclusion in this way

<script type="text/javascript">
        var _iub = _iub || [];
        _iub.csConfiguration = {
            siteId: xxx,
            consentOnScrollDelay : 1500,
            callback: {
                onConsentGiven: function(){
                    dataLayer.push({'event': 'iubenda_consent_given'});
                }
            },
            cookiePolicyId: xxx,
            lang: "it",
            banner: {
                fontSize: "13", applyStyles: false,
                html:"Privacy policy HTML"
            }
        };
    </script>

    <script>
        require(['iubenda'], function(){});
    </script>

But this does not solve the errors.

The common error thrown is

Uncaught Error: Mismatched anonymous define() module: function (){return l}

How can I add external non AMD scripts to my Magento 2.1.x without breaking the requirejs functionalities?

Answer 1

You must create the javascript as follows:

<script>
    var _iub = _iub || [];
    _iub.csConfiguration = {
        siteId: xxx,
        consentOnScrollDelay: 1500,
        callback: {
            onConsentGiven: function () {
                dataLayer.push({'event': 'iubenda_consent_given'});
            }
        },
        cookiePolicyId: xxx,
        lang: "it",
        banner: {
            fontSize: "13", applyStyles: false,
            html: "Privacy policy HTML"
        }
    };
    $.getScript("//cdn.iubenda.com/cookie_solution/safemode/iubenda_cs.js");
</script>

You must remove ... requirejs-config.js

Old:

var config = {
    "map" : {
        "*" : {
            ...
            'iubenda' : '//cdn.iubenda.com/cookie_solution/safemode/iubenda_cs.js'
        }
    }
};

New:

var config = {
    "map" : {
        "*" : {
            'iubenda' : '//cdn.iubenda.com/cookie_solution/safemode/iubenda_cs.js'
        }
    }
};