diff --git a/js/src/attribute-mapping/attribute-mapping-sync.js b/js/src/attribute-mapping/attribute-mapping-sync.js
index 7294988a96..574c66324e 100644
--- a/js/src/attribute-mapping/attribute-mapping-sync.js
+++ b/js/src/attribute-mapping/attribute-mapping-sync.js
@@ -3,7 +3,7 @@
  */
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 import { format as formatDate } from '@wordpress/date';
 
 /**
diff --git a/js/src/attribute-mapping/attribute-mapping-table.js b/js/src/attribute-mapping/attribute-mapping-table.js
index 20244e78ee..63f654858b 100644
--- a/js/src/attribute-mapping/attribute-mapping-table.js
+++ b/js/src/attribute-mapping/attribute-mapping-table.js
@@ -3,7 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Pagination, Table, TablePlaceholder } from '@woocommerce/components';
-import { CardBody, CardFooter, Flex, FlexItem } from '@wordpress/components';
+import {
+	CardBody,
+	CardFooter,
+	Flex,
+	FlexItem,
+} from 'extracted/@wordpress/components';
 import { useEffect } from '@wordpress/element';
 import { recordEvent } from '@woocommerce/tracks';
 
diff --git a/js/src/components/account-card/index.js b/js/src/components/account-card/index.js
index 23468d6e57..5df1eb3fa2 100644
--- a/js/src/components/account-card/index.js
+++ b/js/src/components/account-card/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
 import GridiconPhone from 'gridicons/dist/phone';
 import { Icon, store as storeIcon } from '@wordpress/icons';
 
diff --git a/js/src/components/connected-icon-label/index.js b/js/src/components/connected-icon-label/index.js
index c25836ede5..5fc7662bd8 100644
--- a/js/src/components/connected-icon-label/index.js
+++ b/js/src/components/connected-icon-label/index.js
@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
-import { Flex, FlexItem } from '@wordpress/components';
+import { Flex, FlexItem } from 'extracted/@wordpress/components';
 import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle';
 
 /**
diff --git a/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js b/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js
index 90f5652000..9f8733492b 100644
--- a/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js
+++ b/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js
@@ -4,7 +4,8 @@
 import { parsePhoneNumberFromString as parsePhoneNumber } from 'libphonenumber-js';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import { Flex, FlexItem, FlexBlock, RadioControl } from '@wordpress/components';
+import { RadioControl } from '@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/contact-information/phone-number-card/phone-number-card.js b/js/src/components/contact-information/phone-number-card/phone-number-card.js
index 8c9cd3faf5..1f241549df 100644
--- a/js/src/components/contact-information/phone-number-card/phone-number-card.js
+++ b/js/src/components/contact-information/phone-number-card/phone-number-card.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { CardDivider } from '@wordpress/components';
+import { CardDivider } from 'extracted/@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 
 /**
diff --git a/js/src/components/contact-information/phone-number-card/verification-code-control.js b/js/src/components/contact-information/phone-number-card/verification-code-control.js
index 75758b6e41..e54d78f409 100644
--- a/js/src/components/contact-information/phone-number-card/verification-code-control.js
+++ b/js/src/components/contact-information/phone-number-card/verification-code-control.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js b/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js
index 4e089ed911..efa74271bf 100644
--- a/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js
+++ b/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js
@@ -9,7 +9,8 @@ import {
 	useRef,
 	createInterpolateElement,
 } from '@wordpress/element';
-import { Notice, Flex } from '@wordpress/components';
+import { Notice } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/contact-information/store-address-card.js b/js/src/components/contact-information/store-address-card.js
index 609d060ab0..7ad2998226 100644
--- a/js/src/components/contact-information/store-address-card.js
+++ b/js/src/components/contact-information/store-address-card.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, createInterpolateElement } from '@wordpress/element';
-import { CardDivider } from '@wordpress/components';
+import { CardDivider } from 'extracted/@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 import { update as updateIcon } from '@wordpress/icons';
 import { getPath, getQuery } from '@woocommerce/navigation';
diff --git a/js/src/components/google-ads-account-card/connect-ads/index.js b/js/src/components/google-ads-account-card/connect-ads/index.js
index 6926d4d3be..5a48ea05d8 100644
--- a/js/src/components/google-ads-account-card/connect-ads/index.js
+++ b/js/src/components/google-ads-account-card/connect-ads/index.js
@@ -3,7 +3,7 @@
  */
 import { useState, createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { CardDivider } from '@wordpress/components';
+import { CardDivider } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/google-mc-account-card/connect-mc/index.js b/js/src/components/google-mc-account-card/connect-mc/index.js
index f5094a4e2b..81d57f1360 100644
--- a/js/src/components/google-mc-account-card/connect-mc/index.js
+++ b/js/src/components/google-mc-account-card/connect-mc/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CardDivider } from '@wordpress/components';
+import { CardDivider } from 'extracted/@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
diff --git a/js/src/components/google-mc-account-card/reclaim-url-card/index.js b/js/src/components/google-mc-account-card/reclaim-url-card/index.js
index 2503bf2122..041611a3ff 100644
--- a/js/src/components/google-mc-account-card/reclaim-url-card/index.js
+++ b/js/src/components/google-mc-account-card/reclaim-url-card/index.js
@@ -3,7 +3,8 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { CardDivider, Notice } from '@wordpress/components';
+import { Notice } from '@wordpress/components';
+import { CardDivider } from 'extracted/@wordpress/components';
 import { noop } from 'lodash';
 import { getSetting } from '@woocommerce/settings'; // eslint-disable-line import/no-unresolved
 // The above is an unpublished package, delivered with WC, we use Dependency Extraction Webpack Plugin to import it.
diff --git a/js/src/components/google-mc-account-card/switch-url-card/index.js b/js/src/components/google-mc-account-card/switch-url-card/index.js
index aca8577fb0..dc5d8a8735 100644
--- a/js/src/components/google-mc-account-card/switch-url-card/index.js
+++ b/js/src/components/google-mc-account-card/switch-url-card/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { CardDivider } from '@wordpress/components';
+import { CardDivider } from 'extracted/@wordpress/components';
 import { getSetting } from '@woocommerce/settings'; // eslint-disable-line import/no-unresolved
 // The above is an unpublished package, delivered with WC, we use Dependency Extraction Webpack Plugin to import it.
 // See https://github.com/woocommerce/woocommerce-admin/issues/7781
diff --git a/js/src/components/paid-ads/billing-card/billing-card.js b/js/src/components/paid-ads/billing-card/billing-card.js
index d441a37def..c58c90ac73 100644
--- a/js/src/components/paid-ads/billing-card/billing-card.js
+++ b/js/src/components/paid-ads/billing-card/billing-card.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import Gridiconcheckmark from 'gridicons/dist/checkmark';
-import { Flex, FlexBlock } from '@wordpress/components';
+import { Flex, FlexBlock } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/paid-ads/campaign-preview/campaign-preview-card.js b/js/src/components/paid-ads/campaign-preview/campaign-preview-card.js
index ca9bf85c1c..6a35e28b1f 100644
--- a/js/src/components/paid-ads/campaign-preview/campaign-preview-card.js
+++ b/js/src/components/paid-ads/campaign-preview/campaign-preview-card.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useRef } from '@wordpress/element';
-import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
 import GridiconChevronLeft from 'gridicons/dist/chevron-left';
 import GridiconChevronRight from 'gridicons/dist/chevron-right';
 
diff --git a/js/src/components/paid-ads/campaign-preview/mockup-search.js b/js/src/components/paid-ads/campaign-preview/mockup-search.js
index bdf2b04d2b..f99ebda02c 100644
--- a/js/src/components/paid-ads/campaign-preview/mockup-search.js
+++ b/js/src/components/paid-ads/campaign-preview/mockup-search.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/tree-select-control/options.js b/js/src/components/tree-select-control/options.js
index 0eb70d8b4a..0a40c0079f 100644
--- a/js/src/components/tree-select-control/options.js
+++ b/js/src/components/tree-select-control/options.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
 import classnames from 'classnames';
 
diff --git a/js/src/dashboard/summary-section/summary-card.js b/js/src/dashboard/summary-section/summary-card.js
index a63cf23840..e838ebbbbb 100644
--- a/js/src/dashboard/summary-section/summary-card.js
+++ b/js/src/dashboard/summary-section/summary-card.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Card, CardHeader } from '@wordpress/components';
+import { Card, CardHeader } from 'extracted/@wordpress/components';
 /**
  * Internal dependencies
  */
diff --git a/js/src/external-components/woocommerce/compare-filter/index.js b/js/src/external-components/woocommerce/compare-filter/index.js
index 1a1fa6fa4e..64c9157bb2 100644
--- a/js/src/external-components/woocommerce/compare-filter/index.js
+++ b/js/src/external-components/woocommerce/compare-filter/index.js
@@ -9,8 +9,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Card, CardBody, CardFooter, CardHeader } from '@wordpress/components';
-import { Button } from 'extracted/@wordpress/components';
+import {
+	Card,
+	CardBody,
+	CardFooter,
+	CardHeader,
+	Button,
+} from 'extracted/@wordpress/components';
 import { isEqual, isFunction } from 'lodash';
 import PropTypes from 'prop-types';
 import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation';
diff --git a/js/src/get-started-page/benefits-card/index.js b/js/src/get-started-page/benefits-card/index.js
index 5a28b64e62..af7bab6c1c 100644
--- a/js/src/get-started-page/benefits-card/index.js
+++ b/js/src/get-started-page/benefits-card/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardBody, FlexItem } from '@wordpress/components';
+import { Card, CardBody, FlexItem } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**
diff --git a/js/src/get-started-page/customer-quotes-card/index.js b/js/src/get-started-page/customer-quotes-card/index.js
index b661082581..81307b431d 100644
--- a/js/src/get-started-page/customer-quotes-card/index.js
+++ b/js/src/get-started-page/customer-quotes-card/index.js
@@ -2,7 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardHeader, Flex, FlexBlock } from '@wordpress/components';
+import {
+	Flex,
+	FlexBlock,
+	Card,
+	CardHeader,
+} from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/get-started-page/features-card/index.js b/js/src/get-started-page/features-card/index.js
index 2e6460e10c..2cbb1ba930 100644
--- a/js/src/get-started-page/features-card/index.js
+++ b/js/src/get-started-page/features-card/index.js
@@ -2,7 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardHeader, Flex, FlexBlock } from '@wordpress/components';
+import {
+	Flex,
+	FlexBlock,
+	Card,
+	CardHeader,
+} from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**
diff --git a/js/src/get-started-page/get-started-card/index.js b/js/src/get-started-page/get-started-card/index.js
index ead847c49d..5cce151ea7 100644
--- a/js/src/get-started-page/get-started-card/index.js
+++ b/js/src/get-started-page/get-started-card/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Card, CardBody, FlexItem } from '@wordpress/components';
+import { FlexItem, Card, CardBody } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
diff --git a/js/src/get-started-page/get-started-with-video-card/index.js b/js/src/get-started-page/get-started-with-video-card/index.js
index 0fe6ea1439..6f8f12f2af 100644
--- a/js/src/get-started-page/get-started-with-video-card/index.js
+++ b/js/src/get-started-page/get-started-with-video-card/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Card, CardBody, FlexBlock, Tip } from '@wordpress/components';
+import { Tip } from '@wordpress/components';
+import { FlexBlock, Card, CardBody } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
diff --git a/js/src/product-feed/issues-table-card/index.js b/js/src/product-feed/issues-table-card/index.js
index 73c23708cc..b765f8911f 100644
--- a/js/src/product-feed/issues-table-card/index.js
+++ b/js/src/product-feed/issues-table-card/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { Card, CardHeader } from '@wordpress/components';
+import { Card, CardHeader } from 'extracted/@wordpress/components';
 import classnames from 'classnames';
 
 /**
diff --git a/js/src/product-feed/issues-table-card/issues-table.js b/js/src/product-feed/issues-table-card/issues-table.js
index 36b3462798..38e969d241 100644
--- a/js/src/product-feed/issues-table-card/issues-table.js
+++ b/js/src/product-feed/issues-table-card/issues-table.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CardBody, CardFooter } from '@wordpress/components';
+import { CardBody, CardFooter } from 'extracted/@wordpress/components';
 import { Pagination, TablePlaceholder } from '@woocommerce/components';
 
 /**
diff --git a/js/src/product-feed/product-feed-table-card/index.js b/js/src/product-feed/product-feed-table-card/index.js
index bfb2ed47e8..cff7bda694 100644
--- a/js/src/product-feed/product-feed-table-card/index.js
+++ b/js/src/product-feed/product-feed-table-card/index.js
@@ -3,13 +3,13 @@
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { CheckboxControl } from '@wordpress/components';
 import {
-	CheckboxControl,
 	Card,
 	CardHeader,
 	CardBody,
 	CardFooter,
-} from '@wordpress/components';
+} from 'extracted/@wordpress/components';
 import {
 	EmptyTable,
 	Pagination,
diff --git a/js/src/product-feed/product-statistics/index.js b/js/src/product-feed/product-statistics/index.js
index b4c28ccfd5..e22a3491eb 100644
--- a/js/src/product-feed/product-statistics/index.js
+++ b/js/src/product-feed/product-statistics/index.js
@@ -3,12 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
+	FlexItem,
 	Card,
 	CardHeader,
 	CardBody,
 	CardFooter,
-	FlexItem,
-} from '@wordpress/components';
+} from 'extracted/@wordpress/components';
 
 import {
 	SummaryList,
diff --git a/js/src/product-feed/product-statistics/status-box/status.js b/js/src/product-feed/product-statistics/status-box/status.js
index 197276e19d..89c368a873 100644
--- a/js/src/product-feed/product-statistics/status-box/status.js
+++ b/js/src/product-feed/product-statistics/status-box/status.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Flex, FlexItem } from '@wordpress/components';
+import { Flex, FlexItem } from 'extracted/@wordpress/components';
 
 /**
  * Renders a status line. With a title, an icon and a description for the status
diff --git a/js/src/product-feed/review-request/review-request-notice.js b/js/src/product-feed/review-request/review-request-notice.js
index 69e5f4762a..b5cd4159d0 100644
--- a/js/src/product-feed/review-request/review-request-notice.js
+++ b/js/src/product-feed/review-request/review-request-notice.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { format as formatDate } from '@wordpress/date';
-import { Flex, FlexItem } from '@wordpress/components';
+import { Flex, FlexItem } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/settings/edit-store-address.js b/js/src/settings/edit-store-address.js
index d34068b474..1396bfb44d 100644
--- a/js/src/settings/edit-store-address.js
+++ b/js/src/settings/edit-store-address.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { getHistory } from '@woocommerce/navigation';
 import { useState } from '@wordpress/element';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/settings/linked-accounts.js b/js/src/settings/linked-accounts.js
index c0c027eab5..bea46bf322 100644
--- a/js/src/settings/linked-accounts.js
+++ b/js/src/settings/linked-accounts.js
@@ -3,7 +3,7 @@
  */
 import { queueRecordEvent } from '@woocommerce/tracks';
 import { __ } from '@wordpress/i18n';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 import { useState } from '@wordpress/element';
 
 /**
diff --git a/js/src/settings/reconnect-google-account/disconnect-google-account-card.js b/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
index 1c79ca0aef..de38d51bdb 100644
--- a/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
+++ b/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CardDivider, Notice } from '@wordpress/components';
+import { Notice } from '@wordpress/components';
+import { CardDivider } from 'extracted/@wordpress/components';
 import { useState, createInterpolateElement } from '@wordpress/element';
 import { getNewPath } from '@woocommerce/navigation';
 
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
index 14099026e6..1e8eb3704e 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
 import { Pill } from '@woocommerce/components';
 import GridiconCheckmark from 'gridicons/dist/checkmark';
 import GridiconGift from 'gridicons/dist/gift';
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js
index 628d730804..3a4746b13d 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js
@@ -3,7 +3,7 @@
  */
 import { sprintf, __, _n } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
-import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 
 /**
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
index 8bc19b9dfa..cae107d92a 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { select } from '@wordpress/data';
 import { useState } from '@wordpress/element';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 import { noop, merge } from 'lodash';
 
 /**
diff --git a/js/src/wcdl/section/card/body/index.js b/js/src/wcdl/section/card/body/index.js
index a9dd0e3e17..8377e3b960 100644
--- a/js/src/wcdl/section/card/body/index.js
+++ b/js/src/wcdl/section/card/body/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CardBody } from '@wordpress/components';
+import { CardBody } from 'extracted/@wordpress/components';
 import classnames from 'classnames';
 
 /**
diff --git a/js/src/wcdl/section/card/footer/index.js b/js/src/wcdl/section/card/footer/index.js
index b1fdc14183..0cac31e1c7 100644
--- a/js/src/wcdl/section/card/footer/index.js
+++ b/js/src/wcdl/section/card/footer/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CardFooter } from '@wordpress/components';
+import { CardFooter } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/wcdl/section/card/index.js b/js/src/wcdl/section/card/index.js
index 45ddb3c8a5..f1dcd6c64a 100644
--- a/js/src/wcdl/section/card/index.js
+++ b/js/src/wcdl/section/card/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Card as WPCard } from '@wordpress/components';
+import { Card as WPCard } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies