diff --git a/packages/calypso-build/webpack.config.js b/packages/calypso-build/webpack.config.js
index d563544571c838..22df3672aa2b1e 100644
--- a/packages/calypso-build/webpack.config.js
+++ b/packages/calypso-build/webpack.config.js
@@ -132,6 +132,7 @@ function getWebpackConfig(
 		},
 		resolve: {
 			extensions: [ '.json', '.js', '.jsx', '.ts', '.tsx' ],
+			mainFields: [ 'browser', 'calypso:src', 'module', 'main' ],
 			modules: [ 'node_modules' ],
 		},
 		node: false,
diff --git a/packages/composite-checkout/webpack.config.demo.js b/packages/composite-checkout/webpack.config.demo.js
index 20c6cf230a5e6f..e300562885ea22 100644
--- a/packages/composite-checkout/webpack.config.demo.js
+++ b/packages/composite-checkout/webpack.config.demo.js
@@ -18,7 +18,10 @@ module.exports = {
 			},
 		],
 	},
-	resolve: { extensions: [ '*', '.js', '.jsx' ] },
+	resolve: {
+		extensions: [ '*', '.js', '.jsx' ],
+		mainFields: [ 'browser', 'calypso:src', 'module', 'main' ],
+	},
 	output: {
 		path: path.resolve( __dirname, '/dist/' ),
 		publicPath: '/dist/',
diff --git a/packages/composite-checkout/webpack.config.js b/packages/composite-checkout/webpack.config.js
index ac940d0c1a8c1f..a0380fb3f2d452 100644
--- a/packages/composite-checkout/webpack.config.js
+++ b/packages/composite-checkout/webpack.config.js
@@ -27,7 +27,10 @@ module.exports = {
 			},
 		],
 	},
-	resolve: { extensions: [ '*', '.js', '.jsx' ] },
+	resolve: {
+		extensions: [ '*', '.js', '.jsx' ],
+		mainFields: [ 'browser', 'calypso:src', 'module', 'main' ],
+	},
 	output: {
 		path: path.resolve( __dirname, 'dist/' ),
 		publicPath: '/dist/',