From 3d5434d543874638437ed10a27a51848e8637db1 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Fri, 5 Jan 2024 18:05:39 +0100 Subject: [PATCH] DependencyExtractionWebpackPlugin: Use module for @wordpress/interactivity (#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. --- .../dependency-extraction-webpack-plugin/lib/util.js | 6 +++++- .../test/__snapshots__/build.js.snap | 12 ++++++------ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js index bc2b2221e8fc9a..50b7eaa8db98fb 100644 --- a/packages/dependency-extraction-webpack-plugin/lib/util.js +++ b/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 }`; } } diff --git a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap index 73c72340c15192..84ed7660802ba2 100644 --- a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap +++ b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap @@ -21,14 +21,14 @@ 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`] = ` -" array('@wordpress/interactivity'), 'version' => 'a2723a31145b5f1ec2fd', 'type' => 'module'); +" 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", }, @@ -36,14 +36,14 @@ exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dependency-g `; exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dynamic-dependency-graph\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = ` -" array(array('id' => '@wordpress/interactivity', 'type' => 'dynamic')), 'version' => '095c38db2c83d0d2e168', 'type' => 'module'); +" 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`] = ` -" array(array('id' => '@wordpress/interactivity', 'type' => 'dynamic')), 'version' => 'b5625778551023855766', 'type' => 'module'); +" 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", },