From 0466e0b0300f3b3da6a605d3eeca57db7c136130 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= <grzegorz@gziolo.pl>
Date: Tue, 5 Jan 2021 11:35:09 +0100
Subject: [PATCH] Scripts: Fix multiple build runtimes conflicting when using
 globals (#27985)

* Scripts: Fix multiple build runtimes to conflict when using globals

* Docs: Add changelog entry for bug fix
---
 packages/scripts/CHANGELOG.md             |  4 +++
 packages/scripts/config/webpack.config.js | 36 ++++++++++++++++++++++-
 packages/scripts/utils/index.js           |  9 +++---
 packages/scripts/utils/package.js         |  3 ++
 4 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index a947df544d862..0ca9ea078c96c 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/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
diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js
index 22a9878ac3e01..190bf16f3c583 100644
--- a/packages/scripts/config/webpack.config.js
+++ b/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: {
diff --git a/packages/scripts/utils/index.js b/packages/scripts/utils/index.js
index d4806fbdeaa57..edb728d0521ec 100644
--- a/packages/scripts/utils/index.js
+++ b/packages/scripts/utils/index.js
@@ -19,7 +19,7 @@ const {
 	hasPostCSSConfig,
 } = require( './config' );
 const { fromProjectRoot, fromConfigRoot, hasProjectFile } = require( './file' );
-const { hasPackageProp } = require( './package' );
+const { getPackageProp, hasPackageProp } = require( './package' );
 
 module.exports = {
 	fromProjectRoot,
@@ -27,16 +27,17 @@ module.exports = {
 	getArgFromCLI,
 	getArgsFromCLI,
 	getFileArgsFromCLI,
+	getJestOverrideConfigFile,
 	getNodeArgsFromCLI,
+	getPackageProp,
 	getWebpackArgs,
-	hasBabelConfig,
 	hasArgInCLI,
+	hasBabelConfig,
 	hasFileArgInCLI,
-	getJestOverrideConfigFile,
 	hasJestConfig,
 	hasPackageProp,
-	hasPrettierConfig,
 	hasPostCSSConfig,
+	hasPrettierConfig,
 	hasProjectFile,
 	spawnScript,
 };
diff --git a/packages/scripts/utils/package.js b/packages/scripts/utils/package.js
index 4de586f297c18..1ad275e64fb68 100644
--- a/packages/scripts/utils/package.js
+++ b/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,
 };