Interactivity API: Delay block hydration to allow interactive block stores to initialize

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();

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'