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; };