Delay block hydration to allow stores to initialize (#66772)

Co-authored-by: westonruter <[email protected]> Co-authored-by: michalczaplinski <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: artemiomorales <[email protected]> Co-authored-by: cbravobernal <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Nov 6, 2024 · f4b013f · f4b013f
1 parent 04d57ce
commit f4b013f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/interactivity/src/init.ts b/packages/interactivity/src/init.ts
@@ -33,6 +33,17 @@ export const init = async () => {
 		`[data-${ directivePrefix }-interactive]`
 	);
 
+	/*
+	 * This `await` with setTimeout is required to apparently ensure that the interactive blocks have their stores
+	 * fully initialized prior to hydrating the blocks. If this is not present, then an error occurs, for example:
+	 * > view.js:46 Uncaught (in promise) ReferenceError: Cannot access 'state' before initialization
+	 * This occurs when splitTask() is implemented with scheduler.yield() as opposed to setTimeout(), as with the former
+	 * split tasks are added to the front of the task queue whereas with the latter they are added to the end of the queue.
+	 */
+	await new Promise( ( resolve ) => {
+		setTimeout( resolve, 0 );
+	} );
+
 	for ( const node of nodes ) {
 		if ( ! hydratedIslands.has( node ) ) {
 			await splitTask();

diff --git a/packages/interactivity/src/utils.ts b/packages/interactivity/src/utils.ts
@@ -54,7 +54,7 @@ const afterNextFrame = ( callback: () => void ) => {
 /**
  * Returns a promise that resolves after yielding to main.
  *
- * @return Promise
+ * @return Promise<void>
  */
 export const splitTask =
 	typeof window.scheduler?.yield === 'function'