DependencyExtractionWebpackPlugin: Use module for @wordpress/interact…

…ivity (#57602)

Use an explicit module external type by default for the @wordpress/interactivity external module.

In #57577, we switched the default external type from module (externals are always hoisted to static imports) to import (externals are always dynamic import()s).

That's likely desirable for most external modules, but @wordpress/interactivity has some known issues where it may not behave as expected if it's not initialized before DOMContentLoaded (#56986).

By declaring an explicit module external type for @wordpress/interactivity, webpack will always hoist this import to a static import, preventing issues with dynamic imports of the package.

packages/dependency-extraction-webpack-plugin/lib/util.js

@@ -67,7 +67,11 @@ function defaultRequestToExternal( request ) {
  */
 function defaultRequestToExternalModule( request ) {
 	if ( request === '@wordpress/interactivity' ) {
-		return request;
+		// This is a special case. Interactivity does not support dynamic imports at this
+		// time. We add the external "module" type to indicate that webpack should
+		// externalize this as a module (instead of our default `import()` external type)
+		// which forces @wordpress/interactivity imports to be hoisted to static imports.
+		return `module ${ request }`;
 	}
 }
 

packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap

@@ -21,29 +21,29 @@ exports[`DependencyExtractionWebpackPlugin modules Webpack \`combine-assets\` sh
 `;
 
 exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dependency-graph\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => 'a2723a31145b5f1ec2fd', 'type' => 'module');
+"<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => '58fadee5eca3ad30aff6', 'type' => 'module');
 "
 `;
 
 exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dependency-graph\` should produce expected output: External modules should match snapshot 1`] = `
 [
   {
-    "externalType": "import",
+    "externalType": "module",
     "request": "@wordpress/interactivity",
     "userRequest": "@wordpress/interactivity",
   },
 ]
 `;
 
 exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dynamic-dependency-graph\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array(array('id' => '@wordpress/interactivity', 'type' => 'dynamic')), 'version' => '095c38db2c83d0d2e168', 'type' => 'module');
+"<?php return array('dependencies' => array(array('id' => '@wordpress/interactivity', 'type' => 'dynamic')), 'version' => '293aebad4ca761cf396f', 'type' => 'module');
 "
 `;
 
 exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dynamic-dependency-graph\` should produce expected output: External modules should match snapshot 1`] = `
 [
   {
-    "externalType": "import",
+    "externalType": "module",
     "request": "@wordpress/interactivity",
     "userRequest": "@wordpress/interactivity",
   },
@@ -249,14 +249,14 @@ exports[`DependencyExtractionWebpackPlugin modules Webpack \`wordpress\` should
 `;
 
 exports[`DependencyExtractionWebpackPlugin modules Webpack \`wordpress-interactivity\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array(array('id' => '@wordpress/interactivity', 'type' => 'dynamic')), 'version' => 'b5625778551023855766', 'type' => 'module');
+"<?php return array('dependencies' => array(array('id' => '@wordpress/interactivity', 'type' => 'dynamic')), 'version' => 'f0242eb6da78af6ca4b8', 'type' => 'module');
 "
 `;
 
 exports[`DependencyExtractionWebpackPlugin modules Webpack \`wordpress-interactivity\` should produce expected output: External modules should match snapshot 1`] = `
 [
   {
-    "externalType": "import",
+    "externalType": "module",
     "request": "@wordpress/interactivity",
     "userRequest": "@wordpress/interactivity",
   },