Jquery UI Race condition w requirejs

[ghost]

If you have allot of extensions installed you can notice race conditions with require js. The biggest one I found so far is with jquery ui.

To fix

app/code/Magento/Theme/View/Frontend/requirejs.config.js

comment out //"mage/dataPost",

and add a shim

shim: {
    "jquery/ui": {
        deps: ['jquery']
    },
    "mage/dataPost": {
        deps: ["jquery/ui"]
    }
},

the complete file should look like

var config = {
    map: {
        "*": {
            "rowBuilder":             "Magento_Theme/js/row-builder",
            "toggleAdvanced":         "mage/toggle",
            "translateInline":        "mage/translate-inline",
            "sticky":                 "mage/sticky",
            "tabs":                   "mage/tabs",
            "zoom":                   "mage/zoom",
            "collapsible":            "mage/collapsible",
            "dropdownDialog":         "mage/dropdown",
            "dropdown":               "mage/dropdowns",
            "accordion":              "mage/accordion",
            "loader":                 "mage/loader",
            "tooltip":                "mage/tooltip",
            "deletableItem":          "mage/deletable-item",
            "itemTable":              "mage/item-table",
            "fieldsetControls":       "mage/fieldset-controls",
            "fieldsetResetControl":   "mage/fieldset-controls",
            "redirectUrl":            "mage/redirect-url",
            "loaderAjax":             "mage/loader",
            "menu":                   "mage/menu",
            "popupWindow":            "mage/popup-window",
            "validation":             "mage/validation/validation",
            "welcome":                "Magento_Theme/js/view/welcome"
        }
    },
    paths: {
        "jquery/ui": "jquery/jquery-ui"
    },
    shim: {
        "jquery/ui": {
            exports: "$",
            deps: ['jquery']
        },
        "mage/dataPost": {
            deps: ["jquery/ui"]
        }
    },
    deps: [
        "jquery/jquery.mobile.custom",
        "js/responsive",
        "mage/common",
        //"mage/dataPost",
        "js/theme",
        "mage/bootstrap"
    ]
};

Preconditions

1. magento 2.1.3
2. php 7.1w
3. percona 5.6

Steps to reproduce

1. I notice the issue on the checkout page after I install reward points and gift card plugin. This issue is not with those plugins you just notice it because it's taking longer to async download the javascript files this is an intermittant race condition with files racing to the top because this is not sync you need a shim because there is no AMD wrapper around jquery UI.

Expected result

1. Files should load fine and not error out but they error out.

Actual result

1. [Screenshot, logs]

[ghost]

This issue was caused by the cyber source extension from magedelight. They loaded a js file in the header which changed the load order of jQuery UI.

[sambolek]

Just for future reference to anyone that might have the same issue.

If you're having issues with Safari browsers, which is often one of the following errors: TypeError: undefined is not an object (evaluating '$.ui.dialog') TypeError: undefined is not an object (evaluating '$.ui.timepicker')

you likely have either a 3rd party extension or external JS that's loading jQuery library which doesn't load jquery/ui as well (Magento one does).

Our case was that we have had CDN with HTTP2 implemented, where all resources are loaded simultaneously. 3rd party JS loaded jQuery before Magento jQuery was loaded.

As no Magento scripts depend on "jquery/ui", but only "jquery", this triggered all Magento scripts depending on "jquery" to start loading, and error out once they reached parts that required "jquery/ui".

The fix was to remove the 3rd party script in question (in our case, this was Klaviyo subscribe script http://www.klaviyo.com/media/js/public/klaviyo_subscribe.js )