Magento – Magento 2.2.1 Checkout page broken and Js fail to load error

This could be because you have an overwrite of onepage.phtml in one of your themes or modules.

I noticed in one of our upgrades, which was experiencing the same issue, that #checkout-loader div was missing the data-mage-init attribute.

This what the div attributes should look like:

<div id="checkout-loader" data-role="checkout-loader" class="loading-mask" data-mage-init='{"checkoutLoader": {}}'>

If you have overwritten onepage.phtml try this fix and use vendor/magento/module-checkout/view/frontend/templates/onepage.phtml as a reference for any other discrepancies.

Override messages.js in this location:

app/design/frontend/Mastering/itdesire/Magento_Theme/web/js/view/messages.js

    /**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
define([
    'jquery',
    'uiComponent',
    'underscore',
    'Magento_Customer/js/customer-data',
    'jquery/jquery-storageapi'
], function ($, Component, _, customerData) {
    'use strict';

    return Component.extend({
        defaults: {
            cookieMessages: [],
            messages: []
        },

        /** @inheritdoc */
        initialize: function () {
            this._super();

            this.cookieMessages = $.cookieStorage.get('mage-messages');
            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });

            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }

            $.cookieStorage.set('mage-messages', '');

            $(window).on('beforeunload', function () {
                $.cookieStorage.set('mage-messages', '');
            });

        }
    });
});