Scripts: Fix multiple build runtimes conflicting when using globals

packages/scripts/CHANGELOG.md

@@ -17,6 +17,10 @@
 
 -   The bundled `webpack-bundle-analyzer` dependency has been updated from requiring `^3.6.1` to requiring `^4.2.0`.
 
+### Bug Fix
+
+-   Fix multiple build (`build` command) runtimes conflicting when using globals ([#27985](https://github.com/WordPress/gutenberg/pull/27985)).
+
 ## 12.6.0 (2020-12-17)
 
 ### Enhancements

packages/scripts/config/webpack.config.js

@@ -17,7 +17,11 @@ const postcssPlugins = require( '@wordpress/postcss-plugins-preset' );
 /**
  * Internal dependencies
  */
-const { hasBabelConfig, hasPostCSSConfig } = require( '../utils' );
+const {
+	getPackageProp,
+	hasBabelConfig,
+	hasPostCSSConfig,
+} = require( '../utils' );
 const FixStyleWebpackPlugin = require( './fix-style-webpack-plugin' );
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -46,6 +50,32 @@ const cssLoaders = [
 	},
 ];
 
+/**
+ * Gets a unique identifier for the webpack build to avoid multiple webpack
+ * runtimes to conflict when using globals.
+ * This is polyfill and it is based on the default webpack 5 implementation.
+ *
+ * @see https://github.com/webpack/webpack/blob/bbb16e7af2eddba4cd77ca739904c2aa238a2b7b/lib/config/defaults.js#L374-L376
+ *
+ * @return {string} The generated identifier.
+ */
+const getJsonpFunctionIdentifier = () => {
+	const jsonpFunction = 'webpackJsonp_';
+	const packageName = getPackageProp( 'name' );
+	if ( typeof packageName !== 'string' || ! packageName ) {
+		return jsonpFunction;
+	}
+	const IDENTIFIER_NAME_REPLACE_REGEX = /^([^a-zA-Z$_])/;
+	const IDENTIFIER_ALPHA_NUMERIC_NAME_REPLACE_REGEX = /[^a-zA-Z0-9$]+/g;
+
+	return (
+		jsonpFunction +
+		packageName
+			.replace( IDENTIFIER_NAME_REPLACE_REGEX, '_$1' )
+			.replace( IDENTIFIER_ALPHA_NUMERIC_NAME_REPLACE_REGEX, '_' )
+	);
+};
+
 const config = {
 	mode,
 	entry: {
@@ -54,6 +84,10 @@ const config = {
 	output: {
 		filename: '[name].js',
 		path: path.resolve( process.cwd(), 'build' ),
+		// Prevents conflicts when multiple webpack runtimes (from different apps)
+		// are used on the same page.
+		// @see https://github.com/WordPress/gutenberg/issues/23607
+		jsonpFunction: getJsonpFunctionIdentifier(),
 	},
 	resolve: {
 		alias: {

packages/scripts/utils/index.js

@@ -19,24 +19,25 @@ const {
 	hasPostCSSConfig,
 } = require( './config' );
 const { fromProjectRoot, fromConfigRoot, hasProjectFile } = require( './file' );
-const { hasPackageProp } = require( './package' );
+const { getPackageProp, hasPackageProp } = require( './package' );
 
 module.exports = {
 	fromProjectRoot,
 	fromConfigRoot,
 	getArgFromCLI,
 	getArgsFromCLI,
 	getFileArgsFromCLI,
+	getJestOverrideConfigFile,
 	getNodeArgsFromCLI,
+	getPackageProp,
 	getWebpackArgs,
-	hasBabelConfig,
 	hasArgInCLI,
+	hasBabelConfig,
 	hasFileArgInCLI,
-	getJestOverrideConfigFile,
 	hasJestConfig,
 	hasPackageProp,
-	hasPrettierConfig,
 	hasPostCSSConfig,
+	hasPrettierConfig,
 	hasProjectFile,
 	spawnScript,
 };

packages/scripts/utils/package.js

@@ -15,9 +15,12 @@ const { pkg, path: pkgPath } = readPkgUp( {
 
 const getPackagePath = () => pkgPath;
 
+const getPackageProp = ( prop ) => pkg && pkg[ prop ];
+
 const hasPackageProp = ( prop ) => pkg && pkg.hasOwnProperty( prop );
 
 module.exports = {
 	getPackagePath,
+	getPackageProp,
 	hasPackageProp,
 };