From 9b21253a892b6e5a9d1dbd1340ebb6730b6277b5 Mon Sep 17 00:00:00 2001
From: Miguel Lezama <lezama@gmail.com>
Date: Fri, 27 Mar 2026 16:12:06 -0300
Subject: [PATCH] Forms: Fix black screen when The Events Calendar is active
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The wp-build generated page-wp-admin.php uses import("@wordpress/boot")
inside a regular inline script. This relies on the browser importmap
being in the DOM before the inline script executes. However, WordPress
outputs the importmap AFTER regular footer scripts (position 107 vs 100
in the DOM), making it fragile — it works by accident in most setups
due to browser microtask timing.

Plugins like The Events Calendar (via StellarWP) disrupt this timing by
converting scripts to type="module" via script_loader_tag, causing the
import() call to fail and leaving the Forms dashboard as a black screen.

Fix: Replace the inline import() with a two-step approach:
1. A plain global config (window.__jetpackFormsBootConfig) set by the
   regular inline script — no module specifiers needed.
2. An inline <script type="module"> printed at priority 20 of
   admin_print_footer_scripts (after the importmap at priority 9),
   which imports @wordpress/boot and calls initSinglePage with the
   config — guaranteed to resolve because modules execute after the
   importmap.

The upstream fix will go into @wordpress/build's page-wp-admin.php
template to fix this for all consumers.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../changelog/fix-forms-boot-importmap-compat |  4 ++
 .../forms/src/dashboard/class-dashboard.php   | 61 +++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 projects/packages/forms/changelog/fix-forms-boot-importmap-compat

diff --git a/projects/packages/forms/changelog/fix-forms-boot-importmap-compat b/projects/packages/forms/changelog/fix-forms-boot-importmap-compat
new file mode 100644
index 000000000000..9f869a0d0d75
--- /dev/null
+++ b/projects/packages/forms/changelog/fix-forms-boot-importmap-compat
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix Forms dashboard black screen when The Events Calendar is active by replacing fragile import() in inline script with a proper script module.
diff --git a/projects/packages/forms/src/dashboard/class-dashboard.php b/projects/packages/forms/src/dashboard/class-dashboard.php
index 77e1b358c261..5110f1e0185a 100644
--- a/projects/packages/forms/src/dashboard/class-dashboard.php
+++ b/projects/packages/forms/src/dashboard/class-dashboard.php
@@ -59,6 +59,66 @@ public static function load_wp_build() {
 		}
 	}
 
+	/**
+	 * Fix import map ordering for the wp-build boot script.
+	 *
+	 * In wp-admin, _wp_footer_scripts (classic scripts) and print_import_map
+	 * both hook into admin_print_footer_scripts at priority 10, but
+	 * _wp_footer_scripts is registered first. This causes the inline
+	 * import("@wordpress/boot") to execute before the import map exists.
+	 *
+	 * This fix moves the import() call from the classic inline script to a
+	 * <script type="module"> printed at priority 20 (after the import map).
+	 *
+	 * @todo Remove once @wordpress/build ships with the loader.js fix upstream
+	 *       (WordPress/gutenberg#76870) and Jetpack updates the dependency.
+	 */
+	public static function fix_boot_import_map_ordering() {
+		$handle = self::FORMS_WPBUILD_ADMIN_SLUG . '-prerequisites';
+
+		add_action(
+			'admin_enqueue_scripts',
+			static function () use ( $handle ) {
+				if ( ! Dashboard::is_jetpack_forms_admin_page() ) {
+					return;
+				}
+
+				$data = wp_scripts()->get_data( $handle, 'after' );
+				if ( empty( $data ) ) {
+					return;
+				}
+
+				// Find and extract the import("@wordpress/boot") inline script.
+				$boot_script = null;
+				$remaining   = array();
+				foreach ( $data as $line ) {
+					if ( strpos( $line, '@wordpress/boot' ) !== false ) {
+						$boot_script = $line;
+					} else {
+						$remaining[] = $line;
+					}
+				}
+
+				if ( $boot_script === null ) {
+					return;
+				}
+
+				// Remove from the classic script handle.
+				wp_scripts()->add_data( $handle, 'after', $remaining );
+
+				// Re-emit as a module script after the import map.
+				add_action(
+					'admin_print_footer_scripts',
+					static function () use ( $boot_script ) {
+						wp_print_inline_script_tag( $boot_script, array( 'type' => 'module' ) );
+					},
+					20
+				);
+			},
+			PHP_INT_MAX
+		);
+	}
+
 	/**
 	 * Script handle for the JS file we enqueue in the Feedback admin page.
 	 *
@@ -97,6 +157,7 @@ public function init() {
 
 		if ( $is_wp_build_enabled ) {
 			self::load_wp_build();
+			self::fix_boot_import_map_ordering();
 		}
 
 		add_action( 'admin_enqueue_scripts', array( $this, 'load_admin_scripts' ) );