[wp-trac] [WordPress Trac] #64888: TypeError: Cannot read properties of undefined (reading 'hasClass') in wp-auth-check.min.js

[WordPress Trac]

#64888: TypeError: Cannot read properties of undefined (reading 'hasClass') in wp-
auth-check.min.js
----------------------------+-----------------------------
 Reporter:  mowsteadily     |      Owner:  (none)
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:  6.9.4
 Severity:  normal          |   Keywords:
  Focuses:                  |
----------------------------+-----------------------------
 This was first reported here
 [https://core.trac.wordpress.org/ticket/59355], but I'm unable to tag a
 comment there with 6.9.4, so creating a new ticket.

 {{{
 wp-auth-check.min.js?ver=6.9.4:2 Uncaught TypeError: Cannot read
 properties of undefined (reading 'hasClass')
     at HTMLDocument.<anonymous> (wp-auth-check.min.js?ver=6.9.4:2:655)
     at HTMLDocument.dispatch (jquery.min.js?ver=3.7.1:2:40035)
     at v.handle (jquery.min.js?ver=3.7.1:2:38006)
     at Object.trigger (jquery.min.js?ver=3.7.1:2:70124)
     at HTMLDocument.<anonymous> (jquery.min.js?ver=3.7.1:2:70726)
     at ce.each (jquery.min.js?ver=3.7.1:2:3129)
     at e.<computed>.each (jquery.min.js?ver=3.7.1:2:1594)
     at e.<computed>.trigger (jquery.min.js?ver=3.7.1:2:70701)
     at Object.<anonymous> (heartbeat.min.js?ver=6.9.4:2:2186)
     at c (jquery.min.js?ver=3.7.1:2:25304)
 }}}


 I'm seeing this error on multiple sites, specifically on wp-admin/edit.php
 pages for posts and cpts. It's difficult to reliably reproduce - on our
 sites it does seem to be dependent on "The Events Calendar" being active,
 but it doesn't occur on a demo site with just the Events Calendar, and it
 also doesn't occur when the sites are cloned to a local development
 environment (frustrating!) so it may also depend on database and server
 setup.

 It's also fixed by having the "Enable jQuery Migrate Helper" plugin
 active, as suggested by [https://www.kickstartcommerce.com/fixing-
 wordpress-wp-auth-check-min-js-uncaught-typeerror.html| this post from
 someone else experiencing the issue], but that plugin isn't logging any
 migrate errors so not sure what it is that's fixing it. Toggling
 CONCATENATE_SCRIPTS and SCRIPT_DEBUG doesn't affect the error.

 Currently we're not seeing this blocking downstream javascript
 functionality, but the posts I've linked to do report issues with that.

 On looking at the code triggering the error, I do think it's a bug in core
 that's exposed by particular circumstances, not completely created by bugs
 in 3rd party plugins.

 The issue is this block of code in wp-includes/js/wp-auth-check.js


 {{{
         /**
          * Binds to the Heartbeat Tick event.
          *
          * - Shows the authentication form popup if user is not logged in.
          * - Hides the authentication form popup if it is already visible
 and user is
          *   logged in.
          *
          * @ignore
          *
          * @since 3.6.0
          *
          * @param {Object} e The heartbeat-tick event that has been
 triggered.
          * @param {Object} data Response data.
          */
         $( function() {

                 /**
                  * Hides the authentication form popup when the close icon
 is clicked.
                  *
                  * @ignore
                  *
                  * @since 3.6.0
                  */
                 wrap = $( '#wp-auth-check-wrap' );
                 wrap.find( '.wp-auth-check-close' ).on( 'click',
 function() {
                         hide();
                         setShowTimeout();
                 });
         }).on( 'heartbeat-tick.wp-auth-check', function( e, data ) {
                 if ( 'wp-auth-check' in data ) {
                         if ( ! data['wp-auth-check'] && wrap.hasClass(
 'hidden' ) && ! tempHidden ) {
                                 show();
                         } else if ( data['wp-auth-check'] && !
 wrap.hasClass( 'hidden' ) ) {
                                 hide();
                         }
                 }
         });
 }}}


 In some circumstances (maybe slower loading, or order of loading of
 scripts in the admin footer, or something weird with one of the scripts on
 the footer?), the lines of code hooked to heartbeat-tick.wp-auth-check
 execute before the lines defining the wrap variable, so we get an error.
 On subsequent executions of heartbeat-tick.wp-auth-check there's no error
 since the variable is now defined.

 Regardless of what's causing it, since we can't be 100% sure of the order
 of execution, it seems incorrect for the heartbeat-tick.wp-auth-check-
 attached block to be relying on those first lines for definition of a
 variable.

 This function should probably be something like:


 {{{
         $( function() {
                 $( '#wp-auth-check-wrap .wp-auth-check-close' ).on(
 'click', function() {
                         hide();
                         setShowTimeout();
                 });
         }).on( 'heartbeat-tick.wp-auth-check', function( e, data ) {
                 if ( 'wp-auth-check' in data ) {
                         wrap = $( '#wp-auth-check-wrap' );
                         if ( ! data['wp-auth-check'] && wrap.hasClass(
 'hidden' ) && ! tempHidden ) {
                                 show();
                         } else if ( data['wp-auth-check'] && !
 wrap.hasClass( 'hidden' ) ) {
                                 hide();
                         }
                 }
         });
 }}}


 If I manually edit the site version of wp-includes/js/wp-auth-check.min.js
 to the above the error no longer occurs.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64888>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform