importmap @wordpress/interactivity

Some web browsers have trouble getting anything from importmap if there’s a whole bunch of other javascript before this:

<script type="importmap" id="wp-importmap">

Those web browsers will throw an error like this:

Uncaught TypeError: The specifier “@wordpress/interactivity” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

In the file wp-includes/class-wp-script-modules.php, there is a public function called add_hooks()

The trouble is, there is no priority set in the following add_action in that function:

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

That pretty much leaves it up to chance whether the import map loads before or after other javascript.

So to make sure it loads before most other javascript, I added this to my child theme’s functions.php file:

remove_action( 'after_setup_theme', array( wp_script_modules(), 'add_hooks' ) );
add_action('wp_head', 'print_import_map_before_plugin_scripts', 8);
function print_import_map_before_plugin_scripts() {
    wp_script_modules()->print_import_map();
    wp_script_modules()->print_enqueued_script_modules();
    wp_script_modules()->print_script_module_preloads();
    echo "\r\n";
}

Maybe the WordPress team will add priority to those actions in the wp-includes/class-wp-script-modules.php file eventually. If that happens, it will no longer be necessary to add all this stuff to the functions.php file. But for now, this works, and it gives you just one importmap script instead of two.