Skip to content

Forms: Fix boot script timing with third-party plugins that use script modules#47823

Merged
enejb merged 1 commit intotrunkfrom
fix/forms-boot-importmap-compat
Mar 30, 2026
Merged

Forms: Fix boot script timing with third-party plugins that use script modules#47823
enejb merged 1 commit intotrunkfrom
fix/forms-boot-importmap-compat

Conversation

@lezama
Copy link
Copy Markdown
Contributor

@lezama lezama commented Mar 27, 2026

Resolves FORMS-667

Note upstream fix WordPress/gutenberg#76870

Description

The wp-build generated page-wp-admin.php attaches an import("@wordpress/boot") call to a classic inline script via wp_add_inline_script. In admin_print_footer_scripts, both _wp_footer_scripts (classic scripts) and print_import_map run at priority 10, but _wp_footer_scripts is registered first — so the inline import() executes before the import map is in the DOM.

This is a latent bug: bare specifier resolution requires the import map to already exist. It happens to work in most environments because browser microtask scheduling defers the actual resolution. But when a third-party plugin (e.g. The Events Calendar, via StellarWP) converts classic scripts to type="module" using script_loader_tag, the timing changes and @wordpress/boot fails to resolve — resulting in a blank Forms dashboard.

Fix

Move the import("@wordpress/boot") inline code from the classic script handle to a <script type="module"> printed at admin_print_footer_scripts priority 20, well after the import map (priority 10). Module scripts resolve bare specifiers using whatever import map is in the DOM at execution time, so the ordering is guaranteed.

The fix extracts the existing inline script verbatim — it doesn't reconstruct the boot config or depend on any @wordpress/boot internals.

The upstream fix is WordPress/gutenberg#76870.

Does this pull request change what data or activity we track or use?

No

Testing instructions:

  1. Install and activate The Events Calendar
  2. Navigate to Jetpack → Forms
  3. Before: blank/dark page, console shows TypeError: Failed to resolve module specifier '@wordpress/boot'
  4. After: dashboard loads normally
  5. Deactivate The Events Calendar — Forms dashboard still works

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 27, 2026

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

  • To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the fix/forms-boot-importmap-compat branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack fix/forms-boot-importmap-compat

Interested in more tips and information?

  • In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
  • Read more about our development workflow here: PCYsg-eg0-p2
  • Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 27, 2026

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • 🔴 Add a "[Status]" label (In Progress, Needs Review, ...).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖


Follow this PR Review Process:

  1. Ensure all required checks appearing at the bottom of this PR are passing.
  2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
  3. You can use GitHub's Reviewers functionality to request a review.
  4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

@github-actions github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Mar 27, 2026
@lezama lezama force-pushed the fix/forms-boot-importmap-compat branch from 2c9a3e0 to 0f28c4e Compare March 27, 2026 19:31
@jp-launch-control
Copy link
Copy Markdown

jp-launch-control bot commented Mar 27, 2026

Code Coverage Summary

Coverage changed in 1 file.

File Coverage Δ% Δ Uncovered
projects/packages/forms/src/dashboard/class-dashboard.php 85/266 (31.95%) -3.91% 29 💔

Full summary · PHP report · JS report

If appropriate, add one of these labels to override the failing coverage check: Covered by non-unit tests Use to ignore the Code coverage requirement check when E2Es or other non-unit tests cover the code Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR I don't care about code coverage for this PR Use this label to ignore the check for insufficient code coveage.

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>
@lezama lezama force-pushed the fix/forms-boot-importmap-compat branch from 0f28c4e to 9b21253 Compare March 27, 2026 20:48
@lezama lezama changed the title Forms: Fix black screen when The Events Calendar is active Forms: Fix boot script timing with third-party plugins that use script modules Mar 27, 2026
@enejb enejb merged commit a29e538 into trunk Mar 30, 2026
77 of 79 checks passed
@enejb enejb deleted the fix/forms-boot-importmap-compat branch March 30, 2026 09:58
@github-actions github-actions bot removed the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Mar 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants