Add @babel/plugin-proposal-class-properties to run storybook (#35867)

* Add @babel/plugin-proposal-class-properties to run storybook

* Add @babel/plugin-proposal-class-properties to webpack config and remove storybook env from babel config

* Add changelog

plugins/woocommerce-admin/babel.config.js

@@ -23,28 +23,6 @@ module.exports = function ( api ) {
 		ignore: [ 'packages/**/node_modules' ],
 		env: {
 			production: {},
-
-			storybook: {
-				plugins: [
-					/**
-					 * We need to set loose mode here because the storybook's default babel config enables the loose mode.
-					 * The 'loose' mode configuration must be the same for those babel plugins.
-					 *
-					 */
-					[
-						'@babel/plugin-proposal-class-properties',
-						{ loose: true },
-					],
-					[
-						'@babel/plugin-proposal-private-methods',
-						{ loose: true },
-					],
-					[
-						'@babel/plugin-proposal-private-property-in-object',
-						{ loose: true },
-					],
-				],
-			},
 		},
 	};
 };

plugins/woocommerce-admin/webpack.config.js

@@ -124,6 +124,7 @@ const webpackConfig = {
 							],
 							[ '@babel/preset-typescript' ],
 						],
+						plugins: [ '@babel/plugin-proposal-class-properties' ],
 					},
 				},
 			},

plugins/woocommerce/changelog/fix-run-storybook

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Remove storybook env from babel config and add babel class-properties to webpack
+
+

pnpm-lock.yaml

@@ -2018,6 +2018,7 @@ importers:
 
   tools/storybook:
     specifiers:
+      '@babel/plugin-proposal-class-properties': ^7.16.7
       '@babel/preset-env': ^7.16.11
       '@babel/preset-typescript': ^7.16.7
       '@babel/runtime': ^7.17.2
@@ -2046,6 +2047,7 @@ importers:
     dependencies:
       '@babel/preset-typescript': 7.16.7_@babel+core@7.17.8
     devDependencies:
+      '@babel/plugin-proposal-class-properties': 7.18.6_@babel+core@7.17.8
       '@babel/preset-env': 7.16.11_@babel+core@7.17.8
       '@babel/runtime': 7.17.7
       '@storybook/addon-a11y': 6.4.19_sfoxds7t5ydpegc3knd667wn6m

tools/storybook/package.json

@@ -24,6 +24,7 @@
 		"storybook-rtl": "USE_RTL_STYLE=true pnpm run storybook"
 	},
 	"devDependencies": {
+		"@babel/plugin-proposal-class-properties": "^7.16.7",
 		"@babel/preset-env": "^7.16.11",
 		"@babel/runtime": "^7.17.2",
 		"@storybook/addon-a11y": "^6.4.19",

tools/storybook/webpack.config.js

@@ -30,9 +30,8 @@ module.exports = ( storybookConfig ) => {
 	storybookConfig.resolve.alias = wcAdminWebpackConfig.resolve.alias;
 
 	wcAdminPackages.forEach( ( name ) => {
-		storybookConfig.resolve.alias[
+		storybookConfig.resolve.alias[ `@woocommerce/${ name }` ] =
-			`@woocommerce/${ name }`
+			path.resolve( __dirname, `../../packages/js/${ name }/src` );
-		] = path.resolve( __dirname, `../../packages/js/${ name }/src` );
 	} );
 
 	storybookConfig.resolve.alias[ '@woocommerce/settings' ] = path.resolve(