wp-auth-check.min.js: TypeError: h is undefined

[ArtZ91]

This error was catched automatically by error handler logger in admin area:

Type: Standard JS Error
Message: TypeError: h is undefined
File: /wp-includes/js/wp-auth-check.min.js
Line: 2, Col: 652
User role: Editor
WP Version: 6.9

...||d?a["wp-auth-check"]&&!h.hasClass("hidden")&&r():...
............................↑............................

I think it's means that the wrap variable is undefined by some reason inside heartbeat-tick.wp-auth-check event handler.

[westonruter]

@ArtZ91 Can you ​enable SCRIPT_DEBUG to verify that?

If so, then somehow ​this line is failing:

wrap = $( '#wp-auth-check-wrap' );

Does your admin page have an element with a wp-auth-check-wrap ID?

Even if it does, jQuery should be populating wrap with an empty jQuery object. It shouldn't result in an error. For example:

jQuery('#this-does-not-exist').hasClass('nope');

This returns false in the console; it doesn't throw an error.

[ArtZ91]

The problem has not recurred. Note: the bug was detected not in my account, it's Editor's account and the Editor user can't confirm this issue influenced him.

I setup the SCRIPT_DEBUG constant for further logging.

[siliconforks]

Here's a (somewhat contrived) way to trigger this:

1. Open the file wp-includes/js/heartbeat.js and look for the anonymous function with the comment Start one tick after DOM ready.

2. Modify the function so it looks like this:

// Start one tick after DOM ready.
$( function() {
	settings.lastTick = time();
	scheduleNextTick();

	/*
	Sleep for 2 seconds.  That should be enough for an AJAX round-trip to occur.
	*/
	let startTime = Date.now();
	while ( Date.now() - startTime < 2000 ) {
		// do nothing
	}
});

3. Make sure you have SCRIPT_DEBUG set to true.

4. Now in Firefox (I couldn't get this to work in Chrome for some reason) log in to the admin section and click "Posts".

5. In your browser console, you should see the error:

Uncaught TypeError: can't access property "hasClass", wrap is undefined

[westonruter]

OK, I'm able to reproduce the issue, although not with the patch in 4.

This plugin re-creates the scenario:

<?php
/**
 * Plugin Name: Try Early Heartbeat Tick
 */

add_action(
        'admin_enqueue_scripts',
        static function () {
                wp_add_inline_script(
                        'wp-auth-check',
                        'jQuery( document ).trigger( "heartbeat-tick", { "wp-auth-check": false } );'
                );
        }
);

The issue is due to a race condition. The heartbeat-tick event may fire on the document before the DOMContentLoad event fires. This means that the code that sets the wrap variable may in fact run after the event handler for the heartbeat-tick event.

It looks like this was introduced a long time ago, in [23805] for #23295 with a refresh in [50547] which doesn't seem to have changed the underlying problem.

Trac ticket: https://core.trac.wordpress.org/ticket/64403

[westonruter]

@siliconforks Please give the ​this patch a try.

[siliconforks]

Replying to westonruter:

@siliconforks Please give the ​this patch a try.

​PR #10624 does seem to fix the issue (I tested it in Firefox).

[westonruter]

In 61379:

Heartbeat: Handle race condition in wp-auth-check where heartbeat-tick may fire before DOMContentLoaded.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10624

Follow-up to [23805], [50547].

Props westonruter, ArtZ91, siliconforks.
See #23295.
Fixes #64403.