Update storybook builder to webpack 5

Automattic · Sep 16, 2021 · effd0a7 · effd0a7
1 parent 56e1ef2
commit effd0a7
Show file tree

Hide file tree

Showing 4 changed files with 309 additions and 66 deletions.
diff --git a/bin/storybook-default-config.js b/bin/storybook-default-config.js
@@ -5,8 +5,15 @@ const { dirname } = require( 'path' );
 // of the given module.
 const findModule = ( module ) => dirname( require.resolve( module + '/package.json' ) );
 
-module.exports = function storybookDefaultConfig( { stories, webpackAliases = {} } = {} ) {
+module.exports = function storybookDefaultConfig( {
+	stories,
+	plugins = [],
+	webpackAliases = {},
+} = {} ) {
 	return {
+		core: {
+			builder: 'webpack5',
+		},
 		stories: stories && stories.length ? stories : [ '../src/**/*.stories.{js,jsx,ts,tsx}' ],
 		addons: [ '@storybook/addon-actions', '@storybook/preset-scss' ],
 		typescript: {
@@ -39,6 +46,7 @@ module.exports = function storybookDefaultConfig( { stories, webpackAliases = {}
 				...webpackAliases,
 			};
 			config.resolve.mainFields = [ 'browser', 'calypso:src', 'module', 'main' ];
+			config.plugins.push( ...plugins );
 			return config;
 		},
 	};

diff --git a/packages/search/.storybook/main.js b/packages/search/.storybook/main.js
@@ -1,2 +1,10 @@
 const storybookDefaultConfig = require( '../../../bin/storybook-default-config' );
-module.exports = storybookDefaultConfig();
+const webpack = require('webpack');
+
+module.exports = storybookDefaultConfig({
+	plugins: [
+		new webpack.ProvidePlugin( {
+			process: 'process/browser.js',
+		} ),
+	]
+});
diff --git a/packages/search/package.json b/packages/search/package.json
@@ -46,6 +46,8 @@
 		"@babel/core": "^7.14.8",
 		"@babel/preset-env": "^7.14.8",
 		"@storybook/addon-actions": "^6.3.8",
+		"@storybook/builder-webpack5": "^6.3.8",
+		"@storybook/manager-webpack5": "^6.3.8",
 		"@storybook/preset-scss": "^1.0.3",
 		"@testing-library/dom": "^8.1.0",
 		"@testing-library/react": "^12.0.0",