Implement error throwing on Scripts imported from Modules

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

@@ -73,10 +73,7 @@ class DependencyExtractionWebpackPlugin {
 		}
 
 		// Cascade to default if unhandled and enabled.
-		if (
-			typeof externalRequest === 'undefined' &&
-			this.options.useDefaults
-		) {
+		if ( ! externalRequest && this.options.useDefaults ) {
 			externalRequest = this.useModules
 				? defaultRequestToExternalModule( request )
 				: defaultRequestToExternal( request );
@@ -86,6 +83,10 @@ class DependencyExtractionWebpackPlugin {
 			externalRequest = request;
 		}
 
+		if ( externalRequest instanceof Error ) {
+			return callback( externalRequest );
+		}
+
 		if ( externalRequest ) {
 			this.externalizedDeps.add( request );
 

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

@@ -62,8 +62,11 @@ function defaultRequestToExternal( request ) {
  * Currently only @wordpress/interactivity
  *
  * @param {string} request Module request (the module name in `import from`) to be transformed
- * @return {string|undefined} The resulting external definition. Return `undefined`
- *   to ignore the request. Return `string` to map the request to an external. This may simply be returning the request, e.g. `@wordpress/interactivity` maps to the external `@wordpress/interactivity`.
+ * @return {string|boolean|Error|undefined} The resulting external definition.
+ *   - Return `undefined` to ignore the request (do not externalize).
+ *   - Return `true` to externalize the request with the same Module ID
+ *   - Return `string` to map the request to an external.
+ *   - Return `Error` to emit an error.
  */
 function defaultRequestToExternalModule( request ) {
 	if ( request === '@wordpress/interactivity' ) {
@@ -73,6 +76,14 @@ function defaultRequestToExternalModule( request ) {
 		// which forces @wordpress/interactivity imports to be hoisted to static imports.
 		return `module ${ request }`;
 	}
+
+	const isWordPressScript = Boolean( defaultRequestToExternal( request ) );
+
+	if ( isWordPressScript ) {
+		return new Error(
+			`Attempted to use WordPress script in a module: ${ request }`
+		);
+	}
 }
 
 /**

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

@@ -72,6 +72,16 @@ describe.each( /** @type {const} */ ( [ 'scripts', 'modules' ] ) )(
 					} )
 				);
 
+				/* eslint-disable jest/no-conditional-expect */
+				if ( configCase.includes( 'error' ) ) {
+					expect( stats.hasErrors() ).toBe( true );
+					expect(
+						stats.toString( { errors: true, all: false } )
+					).toMatchSnapshot();
+					return;
+				}
+				/* eslint-enable jest/no-conditional-expect */
+
 				if ( stats.hasErrors() ) {
 					throw new Error(
 						stats.toString( { errors: true, all: false } )

packages/dependency-extraction-webpack-plugin/test/fixtures/combine-assets/webpack.config.js

@@ -12,7 +12,9 @@ module.exports = {
 		new DependencyExtractionWebpackPlugin( {
 			combineAssets: true,
 			requestToExternalModule( request ) {
-				return request.startsWith( '@wordpress/' );
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
 			},
 		} ),
 	],

packages/dependency-extraction-webpack-plugin/test/fixtures/error/index.js

@@ -0,0 +1,10 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable */
+
+import $ from 'jquery';
+const apiFetch = await import( '@wordpress/api-fetch' );
+
+$( () => {
+	apiFetch( { path: '/' } );
+} );

packages/dependency-extraction-webpack-plugin/test/fixtures/error/webpack.config.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			// eslint-disable-next-line no-unused-vars
+			requestToExternal( request ) {
+				return new Error( 'Ensure error in script build.' );
+			},
+		} ),
+	],
+};

packages/dependency-extraction-webpack-plugin/test/fixtures/function-output-filename/webpack.config.js

@@ -12,7 +12,9 @@ module.exports = {
 	plugins: [
 		new DependencyExtractionWebpackPlugin( {
 			requestToExternalModule( request ) {
-				return request.startsWith( '@wordpress/' );
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
 			},
 		} ),
 	],

packages/dependency-extraction-webpack-plugin/test/fixtures/has-extension-suffix/webpack.config.js

@@ -10,7 +10,9 @@ module.exports = {
 	plugins: [
 		new DependencyExtractionWebpackPlugin( {
 			requestToExternalModule( request ) {
-				return request.startsWith( '@wordpress/' );
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
 			},
 		} ),
 	],

packages/dependency-extraction-webpack-plugin/test/fixtures/option-function-output-filename/webpack.config.js

@@ -10,7 +10,9 @@ module.exports = {
 				return `chunk--${ chunkData.chunk.name }--[name].asset.php`;
 			},
 			requestToExternalModule( request ) {
-				return request.startsWith( '@wordpress/' );
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
 			},
 		} ),
 	],

packages/dependency-extraction-webpack-plugin/test/fixtures/option-output-filename/webpack.config.js

@@ -8,7 +8,9 @@ module.exports = {
 		new DependencyExtractionWebpackPlugin( {
 			outputFilename: '[name]-foo.asset.php',
 			requestToExternalModule( request ) {
-				return request.startsWith( '@wordpress/' );
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
 			},
 		} ),
 	],

packages/dependency-extraction-webpack-plugin/test/fixtures/output-format-json/webpack.config.js

@@ -5,6 +5,11 @@ const DependencyExtractionWebpackPlugin = require( '../../..' );
 
 module.exports = {
 	plugins: [
-		new DependencyExtractionWebpackPlugin( { outputFormat: 'json' } ),
+		new DependencyExtractionWebpackPlugin( {
+			outputFormat: 'json',
+			requestToExternalModule( request ) {
+				return request === 'lodash';
+			},
+		} ),
 	],
 };

packages/dependency-extraction-webpack-plugin/test/fixtures/runtime-chunk-single/webpack.config.js

@@ -11,7 +11,9 @@ module.exports = {
 	plugins: [
 		new DependencyExtractionWebpackPlugin( {
 			requestToExternalModule( request ) {
-				return request.startsWith( '@wordpress/' );
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
 			},
 		} ),
 	],

packages/dependency-extraction-webpack-plugin/test/fixtures/style-imports/webpack.config.js

@@ -12,7 +12,9 @@ module.exports = {
 	plugins: [
 		new DependencyExtractionWebpackPlugin( {
 			requestToExternalModule( request ) {
-				return request.startsWith( '@wordpress/' );
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
 			},
 		} ),
 		new MiniCSSExtractPlugin(),

packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress-interactivity/webpack.config.js

@@ -4,5 +4,11 @@
 const DependencyExtractionWebpackPlugin = require( '../../..' );
 
 module.exports = {
-	plugins: [ new DependencyExtractionWebpackPlugin() ],
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternalModule( request ) {
+				return request === 'lodash';
+			},
+		} ),
+	],
 };

packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress-require/webpack.config.js

@@ -7,7 +7,9 @@ module.exports = {
 	plugins: [
 		new DependencyExtractionWebpackPlugin( {
 			requestToExternalModule( request ) {
-				return request.startsWith( '@wordpress/' );
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
 			},
 		} ),
 	],

packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress/webpack.config.js

@@ -7,7 +7,9 @@ module.exports = {
 	plugins: [
 		new DependencyExtractionWebpackPlugin( {
 			requestToExternalModule( request ) {
-				return request.startsWith( '@wordpress/' );
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
 			},
 		} ),
 	],