Mailchimp popup widget pollutes global scope with require and define variables

[adamziel]

Steps to reproduce the issue

1. Create a "MailChimp Subscriber Popup" widget
2. Open any page where the widget is loaded

What I expected

window.define and window.require to be null

What happened instead

window.define and window.require are set variables.

This is very problematic if e.g. jquery is defined before the widget and jquery-ui is defined after the widget. If define() is available, it will be used to load jquery-ui as you can see here:

https://code.jquery.com/ui/1.12.0/jquery-ui.js

        if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define([ "jquery" ], factory );
	} else {

		// Browser globals
		factory( jQuery );
	}

So in this case, define is indeed available, but jquery was loaded in a "regular" way. It means that jquery-ui will always wait for jquery to be available as a dependency and will never be loaded.

A solution

Set window.define.amd to undefined after the mailchimp embed is loaded:

<script type="text/javascript" data-dojo-config="usePlainJson: true, isDebug: false">
jQuery.getScript( "//downloads.mailchimp.com/js/signup-forms/popup/embed.js", function( data, textStatus, jqxhr ) {
    require(["mojo/signup-forms/Loader"], function(L) {
        L.start({"baseUrl":"mc.us13.list-manage.com","uuid":"xxxx","lid":"xxxx"}) }); 
        window.define.amd = undefined; 
    }
 );
</script>

Why window.define.amd? Because MailChimp script needs require and define functions to remain in the global scope, but scripts like jquery will not use define if window.define.amd is undefined, so it's a win-win (an ugly one but still).

A better solution

Have mailchimp fix that on their end

[jeherve]

This is very problematic if e.g. jquery is defined before the widget and jquery-ui is defined after the widget.

Do you know of any scenario when this would happen? Both jQuery and jQuery UI are usually loaded in the head, while the shortcode is loaded in the body. Some caching plugins will change that, but did you run into a specific scenario where jQuery and jQuery UI were not loaded right after each other?

[adamziel]

@jeherve I found this problem by tracking down 903897-zen. Basically as a result of installing some plugins the order of <script> tags became very unfortunate and a jquery-ui calendar broke on a woocommerce page. I agree it can be mitigated by caching plugins, but things breaking unexpectedly is a bad user experience and requires a lot of support time to track down.

[kimitrii]

OMG this helped me so much, Thank you so much for that