From 386d1731051390f59b317c4c973397e5399915f3 Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Tue, 29 Mar 2022 14:57:04 +0800
Subject: [PATCH] Update storybook webpack config to build stories

---
 .../storybook/webpack.config.js               | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/plugins/woocommerce-admin/storybook/webpack.config.js b/plugins/woocommerce-admin/storybook/webpack.config.js
index 1dedd724879..dfb3dc58ca9 100644
--- a/plugins/woocommerce-admin/storybook/webpack.config.js
+++ b/plugins/woocommerce-admin/storybook/webpack.config.js
@@ -22,14 +22,32 @@ const wcAdminPackages = [
 ];
 
 module.exports = ( storybookConfig ) => {
-	storybookConfig.module.rules.push( ...wcAdminWebpackConfig.module.rules );
+	storybookConfig.module.rules = [
+		...storybookConfig.module.rules,
+		...wcAdminWebpackConfig.module.rules,
+		// We need to expose packages in "peerDependencies" to the global scope for @woocommerce/* to resolve packages.
+		{
+			test: require.resolve( 'moment' ),
+			loader: 'expose-loader',
+			options: {
+				exposes: [ 'moment' ],
+			},
+		},
+		{
+			test: require.resolve( '@wordpress/data' ),
+			loader: 'expose-loader',
+			options: {
+				exposes: [ '_wp_data' ],
+			},
+		},
+	];
 
 	storybookConfig.resolve.alias = wcAdminWebpackConfig.resolve.alias;
 
 	wcAdminPackages.forEach( ( name ) => {
 		storybookConfig.resolve.alias[
 			`@woocommerce/${ name }`
-		] = path.resolve( __dirname, `../packages/${ name }/src` );
+		] = path.resolve( __dirname, `../../../packages/js/${ name }/src` );
 	} );
 
 	storybookConfig.resolve.alias[ '@woocommerce/settings' ] = path.resolve(
@@ -53,14 +71,14 @@ module.exports = ( storybookConfig ) => {
 				{
 					from: path.resolve(
 						__dirname,
-						`../packages/components/build-style/*.css`
+						`../../../packages/js/components/build-style/*.css`
 					),
 					to: `./component-css/[name][ext]`,
 				},
 				{
 					from: path.resolve(
 						__dirname,
-						`../packages/experimental/build-style/*.css`
+						`../../../packages/js/experimental/build-style/*.css`
 					),
 					to: `./experimental-css/[name][ext]`,
 				},
@@ -68,5 +86,10 @@ module.exports = ( storybookConfig ) => {
 		} )
 	);
 
+	storybookConfig.externals = {
+		'@wordpress/data': '_wp_data',
+		moment: 'moment',
+	};
+
 	return storybookConfig;
 };