Opt-in all @wordpress packages imports via DEWP

.eslintrc.js

@@ -43,15 +43,6 @@ module.exports = {
 				additionalHooks: 'useSelect',
 			},
 		],
-		// When a file imports from both `@wordpress/components` and `extracted/@wordpress/components`
-		// at the same time, it would get the "no-duplicates" warning. It should be considered a
-		// false positive when working on the externalization process. So here we temporarily change
-		// to use "no-duplicate-imports" instead.
-		//
-		// TODO: After the externalizations of `@wordpress/*` and `@woocommerce/*` are complete,
-		//       remove the following two lines of rule settings.
-		'import/no-duplicates': 'off',
-		'no-duplicate-imports': 'warn',
 	},
 	overrides: [
 		{

.externalized.json

@@ -1 +1 @@
-["@woocommerce/components","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/navigation","@woocommerce/settings","@wordpress/api-fetch","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/is-shallow-equal","@wordpress/keycodes","@wordpress/primitives","@wordpress/priority-queue","@wordpress/url","extracted/@wordpress/components","lodash","moment","react","react-dom"]
+["@woocommerce/components","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/navigation","@woocommerce/settings","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","lodash","moment","react","react-dom"]

js/src/attribute-mapping/attribute-mapping-sync.js

@@ -3,7 +3,7 @@
  */
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Flex } from 'extracted/@wordpress/components';
+import { Flex } from '@wordpress/components';
 import { format as formatDate } from '@wordpress/date';
 
 /**

js/src/attribute-mapping/attribute-mapping-table.js

@@ -3,12 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Pagination, Table, TablePlaceholder } from '@woocommerce/components';
-import {
-	CardBody,
-	CardFooter,
-	Flex,
-	FlexItem,
-} from 'extracted/@wordpress/components';
+import { CardBody, CardFooter, Flex, FlexItem } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 import { recordEvent } from '@woocommerce/tracks';
 

js/src/components/account-card/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import GridiconPhone from 'gridicons/dist/phone';
 import { Icon, store as storeIcon } from '@wordpress/icons';
 

js/src/components/app-button/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Button } from 'extracted/@wordpress/components';
+import { Button } from '@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
 import classnames from 'classnames';

js/src/components/app-input-control/index.js

@@ -4,7 +4,7 @@
 import classnames from 'classnames';
 import { __, sprintf } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
-import { __experimentalInputControl as InputControl } from 'extracted/@wordpress/components';
+import { __experimentalInputControl as InputControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/app-modal/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Modal } from 'extracted/@wordpress/components';
+import { Modal } from '@wordpress/components';
 import classnames from 'classnames';
 
 /**

js/src/components/app-radio-content-control/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { RadioControl } from 'extracted/@wordpress/components';
+import { RadioControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/app-select-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SelectControl } from 'extracted/@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 import classNames from 'classnames';
 
 /**

js/src/components/app-standalone-toggle-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { ToggleControl } from 'extracted/@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/app-sub-nav/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Fragment } from '@wordpress/element';
-import { NavigableMenu } from 'extracted/@wordpress/components';
+import { NavigableMenu } from '@wordpress/components';
 import { Link } from '@woocommerce/components';
 import classnames from 'classnames';
 

js/src/components/app-tab-nav/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { NavigableMenu } from 'extracted/@wordpress/components';
+import { NavigableMenu } from '@wordpress/components';
 import { Link } from '@woocommerce/components';
 import classnames from 'classnames';
 

js/src/components/app-tooltip/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Tooltip } from 'extracted/@wordpress/components';
+import { Tooltip } from '@wordpress/components';
 import { Children } from '@wordpress/element';
 
 /**

js/src/components/connected-icon-label/index.js

@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
-import { Flex, FlexItem } from 'extracted/@wordpress/components';
+import { Flex, FlexItem } from '@wordpress/components';
 import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle';
 
 /**

js/src/components/contact-information/phone-number-card/edit-phone-number-content.js

@@ -4,12 +4,7 @@
 import { parsePhoneNumberFromString as parsePhoneNumber } from 'libphonenumber-js';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import {
-	Flex,
-	FlexItem,
-	FlexBlock,
-	RadioControl,
-} from 'extracted/@wordpress/components';
+import { Flex, FlexItem, FlexBlock, RadioControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

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 'extracted/@wordpress/components';
+import { CardDivider } from '@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 
 /**

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 'extracted/@wordpress/components';
+import { Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/contact-information/phone-number-card/verify-phone-number-content.js

@@ -9,8 +9,7 @@ import {
 	useRef,
 	createInterpolateElement,
 } from '@wordpress/element';
-import { Notice } from 'extracted/@wordpress/components';
-import { Flex } from 'extracted/@wordpress/components';
+import { Notice, Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies

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 'extracted/@wordpress/components';
+import { CardDivider } from '@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 import { update as updateIcon } from '@wordpress/icons';
 import { getPath, getQuery } from '@woocommerce/navigation';

js/src/components/different-currency-notice.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Notice } from 'extracted/@wordpress/components';
+import { Notice } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**

js/src/components/faqs-panel/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Panel, PanelBody, PanelRow } from 'extracted/@wordpress/components';
+import { Panel, PanelBody, PanelRow } from '@wordpress/components';
 import { recordEvent } from '@woocommerce/tracks';
 import classnames from 'classnames';
 

js/src/components/free-listings/choose-audience-section/choose-audience-section.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { RadioControl } from 'extracted/@wordpress/components';
+import { RadioControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 

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 'extracted/@wordpress/components';
+import { CardDivider } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/google-ads-account-card/connected-google-ads-account-card.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { ExternalLink } from 'extracted/@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/google-ads-account-card/terms-modal/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CheckboxControl } from 'extracted/@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useState } from '@wordpress/element';
 

js/src/components/google-mc-account-card/connect-mc/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CardDivider } from 'extracted/@wordpress/components';
+import { CardDivider } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 

js/src/components/google-mc-account-card/reclaim-url-card/index.js

@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { CardDivider, Notice } from 'extracted/@wordpress/components';
+import { CardDivider, Notice } from '@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.

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 'extracted/@wordpress/components';
+import { CardDivider } from '@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

js/src/components/google-mc-account-card/terms-modal/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CheckboxControl } from 'extracted/@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useState } from '@wordpress/element';
 

js/src/components/help-popover/index.js

@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
-import { Popover } from 'extracted/@wordpress/components';
+import { Popover } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import GridiconHelpOutline from 'gridicons/dist/help-outline';
 import { recordEvent } from '@woocommerce/tracks';

js/src/components/paid-ads/asset-group/asset-group-card.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, useEffect, Fragment } from '@wordpress/element';
-import { SelectControl } from 'extracted/@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/paid-ads/asset-group/asset-group-section.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { Tip } from 'extracted/@wordpress/components';
+import { Tip } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/paid-ads/asset-group/final-url-card.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { useState } from '@wordpress/element';
-import { ExternalLink } from 'extracted/@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/paid-ads/assetSpecs.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { ExternalLink } from 'extracted/@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 import { Fragment, createInterpolateElement } from '@wordpress/element';
 
 /**

js/src/components/paid-ads/audience-section.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { SelectControl } from 'extracted/@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

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 'extracted/@wordpress/components';
+import { Flex, FlexBlock } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/paid-ads/billing-card/billing-setup-card.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { ExternalLink } from 'extracted/@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/paid-ads/budget-section/budget-recommendation/index.js

@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { Tip } from 'extracted/@wordpress/components';
+import { Tip } from '@wordpress/components';
 import GridiconNoticeOutline from 'gridicons/dist/notice-outline';
 
 /**

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 'extracted/@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import GridiconChevronLeft from 'gridicons/dist/chevron-left';
 import GridiconChevronRight from 'gridicons/dist/chevron-right';
 

js/src/components/paid-ads/campaign-preview/mockup-search.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Flex } from 'extracted/@wordpress/components';
+import { Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/pre-launch-check-item/index.js

@@ -7,7 +7,7 @@ import {
 	PanelBody,
 	PanelRow,
 	CheckboxControl,
-} from 'extracted/@wordpress/components';
+} from '@wordpress/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { useRef } from '@wordpress/element';