Fix duplicate plugins by using wp.components global in the editor. (https://github.com/woocommerce/woocommerce-blocks/pull/4211)

* fix duplicate slotProvider

* load file on demand

* add comment and load components in blocks as well

* add todo block

plugins/woocommerce-blocks/bin/webpack-configs.js

@@ -22,6 +22,8 @@ const {
 	CHECK_CIRCULAR_DEPS,
 	requestToExternal,
 	requestToHandle,
+	requestToExternalInsideGB,
+	requestToHandleInsideGB,
 	findModuleMatch,
 } = require( './webpack-helpers' );
 
@@ -40,6 +42,20 @@ const sharedPlugins = [
 	} ),
 ].filter( Boolean );
 
+const mainBlocksPlugins = [
+	CHECK_CIRCULAR_DEPS === 'true'
+		? new CircularDependencyPlugin( {
+				exclude: /node_modules/,
+				cwd: process.cwd(),
+				failOnError: 'warn',
+		  } )
+		: false,
+	new DependencyExtractionWebpackPlugin( {
+		injectPolyfill: true,
+		requestToExternal: requestToExternalInsideGB,
+		requestToHandle: requestToHandleInsideGB,
+	} ),
+].filter( Boolean );
 const getProgressBarPluginConfig = ( name, fileSuffix ) => {
 	const isLegacy = fileSuffix && fileSuffix === 'legacy';
 	const progressBarPrefix = isLegacy ? 'Legacy ' : '';
@@ -136,7 +152,44 @@ woocommerce_blocks_env = ${ NODE_ENV }
 		},
 	};
 };
-
+// @todo delete getCoreEditorConfig when wordpress/gutenberg#27462 or rquivalent is merged.
+// This is meant to fix issue #3839 in which we have two instances of SlotFillProvider context. Should be deleted once wordpress/gutenberg#27462.
+const getCoreEditorConfig = ( options = {} ) => {
+	return {
+		...getCoreConfig( options ),
+		entry: {
+			blocksCheckout: './packages/checkout/index.js',
+		},
+		output: {
+			filename: ( chunkData ) => {
+				return `${ kebabCase( chunkData.chunk.name ) }-editor.js`;
+			},
+			path: path.resolve( __dirname, '../build/' ),
+			library: [ 'wc', '[name]' ],
+			libraryTarget: 'this',
+			// This fixes an issue with multiple webpack projects using chunking
+			// overwriting each other's chunk loader function.
+			// See https://webpack.js.org/configuration/output/#outputjsonpfunction
+			jsonpFunction: 'webpackWcBlocksJsonp',
+		},
+		plugins: [
+			...mainBlocksPlugins,
+			new ProgressBarPlugin(
+				getProgressBarPluginConfig( 'Core', options.fileSuffix )
+			),
+			new CreateFileWebpack( {
+				path: './',
+				// file name
+				fileName: 'blocks.ini',
+				// content of the file
+				content: `
+woocommerce_blocks_phase = ${ process.env.WOOCOMMERCE_BLOCKS_PHASE || 3 }
+woocommerce_blocks_env = ${ NODE_ENV }
+`.trim(),
+			} ),
+		],
+	};
+};
 const getMainConfig = ( options = {} ) => {
 	let { fileSuffix } = options;
 	const { alias, resolvePlugins = [] } = options;
@@ -661,4 +714,5 @@ module.exports = {
 	getPaymentsConfig,
 	getExtensionsConfig,
 	getStylingConfig,
+	getCoreEditorConfig,
 };

plugins/woocommerce-blocks/bin/webpack-helpers.js

@@ -9,10 +9,7 @@ const CHECK_CIRCULAR_DEPS = process.env.CHECK_CIRCULAR_DEPS || false;
 
 // If a package is not available, or missing functionality, in an old but __supported__ version of WordPress, it should be listed here.
 // Some packages are not available in legacy versions of WordPress, so we don't want to extract them.
-const requiredPackagesInWPLegacy = [
-	// The package included in WP 5.4 version doesn't include `useResizeObserver`. This can be removed when we support 5.5+.
-	'@wordpress/compose',
-];
+const requiredPackagesInWPLegacy = [];
 
 const wcDepMap = {
 	'@woocommerce/blocks-registry': [ 'wc', 'wcBlocksRegistry' ],
@@ -109,6 +106,13 @@ const requestToExternal = ( request ) => {
 	}
 };
 
+const requestToExternalInsideGB = ( request ) => {
+	if ( request === 'wordpress-components' ) {
+		return [ 'wp', 'components' ];
+	}
+	return requestToExternal( request );
+};
+
 const requestToHandle = ( request ) => {
 	if ( requiredPackagesInWPLegacy.includes( request ) ) {
 		return false;
@@ -118,6 +122,13 @@ const requestToHandle = ( request ) => {
 	}
 };
 
+const requestToHandleInsideGB = ( request ) => {
+	if ( request === 'wordpress-components' ) {
+		return 'wp-components';
+	}
+	return requestToHandle( request );
+};
+
 module.exports = {
 	NODE_ENV,
 	FORCE_MAP,
@@ -126,4 +137,6 @@ module.exports = {
 	findModuleMatch,
 	requestToHandle,
 	requestToExternal,
+	requestToHandleInsideGB,
+	requestToExternalInsideGB,
 };

plugins/woocommerce-blocks/src/AssetsController.php

@@ -60,7 +60,7 @@ final class AssetsController {
 		$this->api->register_script( 'wc-price-format', 'build/price-format.js', [], false );
 
 		if ( Package::feature()->is_feature_plugin_build() ) {
-			$this->api->register_script( 'wc-blocks-checkout', 'build/blocks-checkout.js', [] );
+			$this->api->register_script( 'wc-blocks-checkout', is_admin() ? 'build/blocks-checkout-editor.js' : 'build/blocks-checkout.js', [] );
 		}
 
 		wp_add_inline_script(

plugins/woocommerce-blocks/webpack.config.js

@@ -10,6 +10,7 @@ const {
 	getPaymentsConfig,
 	getExtensionsConfig,
 	getStylingConfig,
+	getCoreEditorConfig,
 } = require( './bin/webpack-configs.js' );
 
 // Only options shared between all configs should be defined here.
@@ -39,6 +40,12 @@ const CoreConfig = {
 	...getCoreConfig( { alias: getAlias() } ),
 };
 
+// Core config for shared libraries to be run inside the editor.
+const CoreEditorConfig = {
+	...sharedConfig,
+	...getCoreEditorConfig( { alias: getAlias() } ),
+};
+
 // Main Blocks config for registering Blocks and for the Editor.
 const MainConfig = {
 	...sharedConfig,
@@ -166,4 +173,5 @@ module.exports = [
 	ExtensionsConfig,
 	PaymentsConfig,
 	StylingConfig,
+	CoreEditorConfig,
 ];