[wp-trac] [WordPress Trac] #62435: Preload script modules and enqueue script modules in wrong order

[WordPress Trac]

#62435: Preload script modules and enqueue script modules in wrong order
---------------------------+-----------------------------
 Reporter:  yogeshbhutkar  |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Script Loader  |    Version:  trunk
 Severity:  normal         |   Keywords:
  Focuses:                 |
---------------------------+-----------------------------
 Issue:

 In `WP_Script_Modules`, there is this order of output:

 {{{
 add_action( $position, array( $this, 'print_import_map' ) );
 add_action( $position, array( $this, 'print_enqueued_script_modules' ) );
 add_action( $position, array( $this, 'print_script_module_preloads' ) );
 }}}

 This is adding a preload after printing script modules. This is not always
 a problem, but can cause a race condition if assets are stored in the
 browser or served quickly. Dependencies may not load before dependent
 scripts.

 Steps to reproduce the issue:

 1. Add a script module with dependencies marked as "static"

 {{{
 <?php
 // instead, use a static loader that injects the script at runtime.
 $static_assets = include trailingslashit( plugin_dir_path( __FILE__ ) ) .
 'build/scripts/test/index.asset.php';
 wp_register_script_module(
         '@my-plugin/test',
         trailingslashit( plugin_dir_url( __FILE__ ) ) .
 'build/scripts/test/index.js',
         array(
                 array(
                         'id'     => '@wordpress/interactivity',
                         'import' => 'static',
                 ),
         ),
         $static_assets['version']
 );
 }}}

 2. View the markup on the page source:

 {{{
 <script type="module" src="https://mysite.com/wp-content/plugins/my-
 plugin/build/scripts/test/index.js?ver=0d40f7f88c7660867299" id="@my-
 plugin/test-js-module"></script>
 <link rel="modulepreload" href="https://mysite.com/wp-includes/js/dist
 /script-modules/interactivity/debug.js?ver=d1c1c7faff86314c361a"
 id="@wordpress/interactivity-js-modulepreload">
 }}}

 The expected output should be the opposite, since the module requires
 @wordpress/interactivity.


 {{{
 <link rel="modulepreload" href="https://mysite.com/wp-includes/js/dist
 /script-modules/interactivity/debug.js?ver=d1c1c7faff86314c361a"
 id="@wordpress/interactivity-js-modulepreload">
 <script type="module" src="https://mysite.com/wp-content/plugins/my-
 plugin/build/scripts/test/index.js?ver=0d40f7f88c7660867299" id="@my-
 plugin/test-js-module"></script>
 }}}


 @ajgagnon reported this issue earlier in the Gutenberg repo. We'd like to
 give him credit for sharing it with us.

 Original Issue Link: https://github.com/WordPress/gutenberg/issues/66982

 Thank You @ajgagnon.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62435>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform