Module not found - Wrong @fluentui imports cause webpack build errors #1763

src/controls/accordion/Accordion.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from './Accordion.module.scss';
 import { IAccordionProps, IAccordionState } from './index';
 import { css } from "@uifabric/utilities/lib/css";
-import { DefaultButton } from '@fluentui/react/lib/components/Button';
+import { DefaultButton } from '@fluentui/react/lib/Button';
 import { IIconProps } from '@fluentui/react/lib/Icon';
 import * as telemetry from '../../common/telemetry';
 

src/controls/dynamicForm/DynamicForm.tsx

@@ -17,7 +17,6 @@ import { IDropdownOption } from "@fluentui/react/lib/Dropdown";
 import { MessageBar, MessageBarType } from "@fluentui/react/lib/MessageBar";
 import { ProgressIndicator } from "@fluentui/react/lib/ProgressIndicator";
 import { IStackTokens, Stack } from "@fluentui/react/lib/Stack";
-import { Icon } from "@fluentui/react/lib/components/Icon/Icon";
 import { DynamicField } from "./dynamicField";
 import {
   DateFormat,
@@ -45,6 +44,7 @@ import CustomFormattingHelper from "../../common/utilities/CustomFormatting";
 // Dynamic Form Props / State
 import { IDynamicFormProps } from "./IDynamicFormProps";
 import { IDynamicFormState } from "./IDynamicFormState";
+import { Icon } from "@fluentui/react/lib/Icon";
 
 const stackTokens: IStackTokens = { childrenGap: 20 };
 

src/controls/dynamicForm/dynamicField/DynamicField.tsx

@@ -3,7 +3,7 @@ import { sp } from '@pnp/sp/presets/all';
 import '@pnp/sp/webs';
 import * as strings from 'ControlStrings';
 import { ActionButton } from '@fluentui/react/lib/Button';
-import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/components/Dropdown';
+import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/Dropdown';
 import { DatePicker } from '@fluentui/react/lib/DatePicker';
 import { Icon } from '@fluentui/react/lib/Icon';
 import { Image } from '@fluentui/react/lib/Image';

src/controls/fieldCollectionData/FieldCollectionData.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as telemetry from '../../common/telemetry';
-import { DefaultButton } from '@fluentui/react/lib/components/Button';
-import { Panel, PanelType } from '@fluentui/react/lib/components/Panel';
-import { Label } from '@fluentui/react/lib/components/Label';
+import { DefaultButton } from '@fluentui/react/lib/Button';
+import { Panel, PanelType } from '@fluentui/react/lib/Panel';
+import { Label } from '@fluentui/react/lib/Label';
 import { CollectionDataViewer } from './collectionDataViewer';
 import { IFieldCollectionDataProps, IFieldCollectionDataState } from "./IFieldCollectionData";
 import * as strings from 'ControlStrings';

src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx

@@ -2,16 +2,16 @@ import * as React from 'react';
 import styles from '../FieldCollectionData.module.scss';
 import { ICollectionDataItemProps } from './ICollectionDataItemProps';
 import { ICollectionDataItemState } from './ICollectionDataItemState';
-import { TextField } from '@fluentui/react/lib/components/TextField';
-import { Icon } from '@fluentui/react/lib/components/Icon';
-import { Link } from '@fluentui/react/lib/components/Link';
-import { Checkbox } from '@fluentui/react/lib/components/Checkbox';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { Icon } from '@fluentui/react/lib/Icon';
+import { Link } from '@fluentui/react/lib/Link';
+import { Checkbox } from '@fluentui/react/lib/Checkbox';
 import * as strings from 'ControlStrings';
 import { CustomCollectionFieldType, ICustomCollectionField } from '../ICustomCollectionField';
-import { Dropdown, IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
-import { ComboBox, IComboBoxOption } from '@fluentui/react/lib/components/ComboBox';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
+import { ComboBox, IComboBoxOption } from '@fluentui/react/lib/ComboBox';
 import { IPeoplePickerContext, PeoplePicker, PrincipalType } from "../../peoplepicker";
-import { Callout, DirectionalHint } from '@fluentui/react/lib/components/Callout';
+import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { CollectionIconField } from '../collectionIconField';
 import { clone, findIndex, sortBy } from '@microsoft/sp-lodash-subset';
 import { Guid } from '@microsoft/sp-core-library';

src/controls/fieldCollectionData/collectionDataViewer/CollectionDataViewer.tsx

@@ -3,12 +3,12 @@ import styles from '../FieldCollectionData.module.scss';
 import { ICollectionDataViewerProps } from './ICollectionDataViewerProps';
 import { ICollectionDataViewerState } from './ICollectionDataViewerState';
 import { CollectionDataItem } from '../collectionDataItem';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
-import { Icon } from '@fluentui/react/lib/components/Icon';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
+import { Icon } from '@fluentui/react/lib/Icon';
 import * as strings from 'ControlStrings';
 import { cloneDeep, sortBy, isEmpty, findIndex } from '@microsoft/sp-lodash-subset';
 import { Pagination } from '../../pagination';
-import { SearchBox } from '@fluentui/react/lib/components/SearchBox';
+import { SearchBox } from '@fluentui/react/lib/SearchBox';
 import { Guid } from '@microsoft/sp-core-library';
 
 export class CollectionDataViewer extends React.Component<ICollectionDataViewerProps, ICollectionDataViewerState> {

src/controls/fieldCollectionData/collectionIconField/CollectionIconField.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import styles from '../FieldCollectionData.module.scss';
 import { ICollectionIconFieldProps } from '.';
-import { TextField } from '@fluentui/react/lib/components/TextField';
-import { Icon } from '@fluentui/react/lib/components/Icon';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { Icon } from '@fluentui/react/lib/Icon';
 
 export class CollectionIconField extends React.Component<ICollectionIconFieldProps, {}> {
 

src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@fluentui/react/lib/Utilities';
 import clone from 'lodash/clone';
 import { IExpandingCardProps } from '@fluentui/react/lib/HoverCard';
-import { DirectionalHint } from '@fluentui/react/lib/common/DirectionalHint';
+import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { Persona, PersonaSize } from '@fluentui/react/lib/Persona';
 import { IconButton, Button, ButtonType } from '@fluentui/react/lib/Button';
 import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';

src/controls/filePicker/FilePicker.tsx

@@ -5,12 +5,13 @@ import { IIconProps } from "@fluentui/react/lib/Icon";
 import {
   ActionButton,
   PrimaryButton
-} from "@fluentui/react/lib/components/Button";
-import { Label } from "@fluentui/react/lib/components/Label";
+} from "@fluentui/react/lib/Button";
+
+import { Label } from "@fluentui/react/lib/Label";
 import {
   Panel,
   PanelType
-} from "@fluentui/react/lib/components/Panel";
+} from "@fluentui/react/lib/Panel";
 import {
   INavLink,
   INavLinkGroup,

src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx

@@ -4,7 +4,7 @@ import { ILinkFilePickerTabProps } from './ILinkFilePickerTabProps';
 import { ILinkFilePickerTabState } from './ILinkFilePickerTabState';
 import { GeneralHelper } from '../../../common/utilities/GeneralHelper';
 import { IFilePickerResult } from '../FilePicker.types';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
 import { TextField } from '@fluentui/react/lib/TextField';
 import { css } from '@fluentui/react/lib/Utilities';
 

src/controls/filePicker/MultipleUploadFilePickerTab/MultipleUploadFilePickerTab.tsx

@@ -4,7 +4,7 @@ import { IMultipleUploadFilePickerTabProps } from './IMultipleUploadFilePickerTa
 import { IMultipleUploadFilePickerTabState } from './IMultipleUploadFilePickerTabState';
 import { IFilePickerResult } from '../FilePicker.types';
 import { GeneralHelper } from '../../../common/utilities/GeneralHelper';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
 import { css } from '@fluentui/react/lib/Utilities';
 import { DragDropFiles } from '../../dragDropFiles/DragDropFiles';
 

src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.types.ts

@@ -1,4 +1,4 @@
-import { IBreadcrumbItem } from "@fluentui/react/lib/components/Breadcrumb";
+import { IBreadcrumbItem } from "@fluentui/react/lib/Breadcrumb";
 import { IFile } from "../../../services/FileBrowserService.types";
 
 export interface OneDriveFilesBreadcrumbItem extends IBreadcrumbItem {

src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
 import { Spinner } from '@fluentui/react/lib/Spinner';
 import { FocusZone } from '@fluentui/react/lib/FocusZone';
 import { List } from '@fluentui/react/lib/List';

src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx

@@ -4,7 +4,7 @@ import { ISiteFilePickerTabProps } from './ISiteFilePickerTabProps';
 import { ISiteFilePickerTabState } from './ISiteFilePickerTabState';
 import { DocumentLibraryBrowser } from '../controls/DocumentLibraryBrowser/DocumentLibraryBrowser';
 import { FileBrowser } from '../controls/FileBrowser/FileBrowser';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
 import { ScrollablePane } from '@fluentui/react/lib/ScrollablePane';
 import { Breadcrumb } from '@fluentui/react/lib/Breadcrumb';
 import { IFile, IFolder, ILibrary } from '../../../services/FileBrowserService.types';

src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx

@@ -4,7 +4,7 @@ import { IUploadFilePickerTabProps } from './IUploadFilePickerTabProps';
 import { IUploadFilePickerTabState } from './IUploadFilePickerTabState';
 import { IFilePickerResult } from '../FilePicker.types';
 import { GeneralHelper } from '../../../common/utilities/GeneralHelper';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
 import { css } from '@fluentui/react/lib/Utilities';
 
 import * as strings from 'ControlStrings';

src/controls/filePicker/WebSearchTab/WebSearchTab.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { IWebSearchTabProps } from './IWebSearchTabProps';
 import { IWebSearchTabState } from './IWebSearchTabState';
 import { ISearchSuggestion, ImageSize, ImageAspect, ImageLicense, DEFAULT_SUGGESTIONS, MAX_ROW_HEIGHT, ROWS_PER_PAGE } from './WebSearchTab.types';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
 import { Label } from '@fluentui/react/lib/Label';
 import { SearchBox } from '@fluentui/react/lib/SearchBox';
 import { Check } from '@fluentui/react/lib/Check';

src/controls/fileTypeIcon/FileTypeIcon.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { findIndex } from '@microsoft/sp-lodash-subset';
 import { IFileTypeIconProps, ApplicationType, ApplicationIconList, IconType, IconSizes, ImageSize, IImageResult, ICON_GENERIC_16, ICON_GENERIC_48, ICON_GENERIC_96, ImageInformation } from './IFileTypeIcon';
 import * as telemetry from '../../common/telemetry';
-import { Icon } from '@fluentui/react/lib/components/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
 import { ICON_GENERIC_20 } from '.';
 
 const ICON_GENERIC = 'Page';

src/controls/listItemComments/components/ConfirmDelete/ConfirmDelete.tsx

@@ -4,7 +4,7 @@ import { ListItemCommentsStateContext } from "../ListItemCommentsStateProvider";
 import { Dialog, DialogType, DialogFooter } from "@fluentui/react/lib/Dialog";
 import { PrimaryButton, DefaultButton } from "@fluentui/react/lib/Button";
 import { CommentItem } from "../Comments/CommentItem";
-import { DocumentCard } from "@fluentui/react/lib/components/DocumentCard";
+import { DocumentCard } from "@fluentui/react/lib/DocumentCard";
 import { DocumentCardDetails } from "@fluentui/react/lib/DocumentCard";
 import { Stack } from "@fluentui/react/lib/Stack";
 import { useListItemCommentsStyles } from "../Comments/useListItemCommentsStyles";

src/controls/listItemPicker/IComboBoxListItemPickerProps.ts

@@ -1,7 +1,7 @@
-import { IComboBoxOptionStyles, IComboBoxStyles } from "@fluentui/react/lib/components/ComboBox";
+import { IComboBoxOptionStyles, IComboBoxStyles } from "@fluentui/react/lib/ComboBox";
 
-import { IAutofillProps } from "@fluentui/react/lib/components/Autofill";
-import { IKeytipProps } from "@fluentui/react/lib/components/Keytip";
+import { IAutofillProps } from "@fluentui/react/lib/Autofill";
+import { IKeytipProps } from "@fluentui/react/lib/Keytip";
 import { SPHttpClient } from '@microsoft/sp-http';
 
 export interface IComboBoxListItemPickerProps {

src/controls/listItemPicker/ListItemPicker.tsx

@@ -1,14 +1,13 @@
 import * as strings from 'ControlStrings';
 import * as React from "react";
 import SPservice from "../../services/SPService";
-import { TagPicker } from "@fluentui/react/lib/components/pickers/TagPicker/TagPicker";
+import { ITag, TagPicker } from '@fluentui/react/lib/Pickers';
 import { Label } from "@fluentui/react/lib/Label";
 import { getId } from '@fluentui/react/lib/Utilities';
 import { IListItemPickerProps } from "./IListItemPickerProps";
 import { IListItemPickerState } from "./IListItemPickerState";
 import * as telemetry from '../../common/telemetry';
 import isEqual from 'lodash/isEqual';
-import { ITag } from '@fluentui/react/lib/components/pickers/TagPicker/TagPicker.types';
 import { SPHelper } from '../../common/utilities/SPHelper';
 import { Guid } from "@microsoft/sp-core-library"
 

src/controls/listPicker/ListPicker.tsx

@@ -1,6 +1,6 @@
 import { cloneDeep } from '@microsoft/sp-lodash-subset';
-import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/components/Dropdown';
-import { Spinner, SpinnerSize } from '@fluentui/react/lib/components/Spinner';
+import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/Dropdown';
+import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
 import * as React from 'react';
 
 import * as telemetry from '../../common/telemetry';

src/controls/listView/IListView.ts

@@ -1,4 +1,4 @@
-import { IColumn, IGroup, SelectionMode, IDetailsRowProps } from '@fluentui/react/lib/components/DetailsList';
+import { IColumn, IGroup, SelectionMode, IDetailsRowProps } from '@fluentui/react/lib/DetailsList';
 
 export { SelectionMode };
 

src/controls/listView/ListView.tsx

@@ -6,7 +6,7 @@ import { IRenderFunction } from '@fluentui/react/lib/Utilities';
 import { mergeStyleSets } from '@fluentui/react/lib/Styling';
 import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup, IDetailsHeaderProps } from '@fluentui/react/lib/DetailsList';
 import { IListViewProps, IListViewState, IViewField, IGrouping, GroupOrder } from './IListView';
-import { IColumn, IGroupRenderProps } from '@fluentui/react/lib/components/DetailsList';
+import { IColumn, IGroupRenderProps } from '@fluentui/react/lib/DetailsList';
 import { findIndex, has, sortBy, isEqual, cloneDeep } from '@microsoft/sp-lodash-subset';
 import { FileTypeIcon, IconType } from '../fileTypeIcon/index';
 import * as strings from 'ControlStrings';

src/controls/map/Map.tsx

@@ -4,11 +4,11 @@ import styles from './Maps.module.scss';
 import { IMapProps } from './IMapProps';
 import { IMapState } from './IMapState';
 import { ICoordinates, MapType, LocationInfo } from './IMap';
-import { Label } from '@fluentui/react/lib/components/Label';
+import { Label } from '@fluentui/react/lib/Label';
 import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
-import { Icon } from "@fluentui/react/lib/components/Icon";
-import { PrimaryButton } from "@fluentui/react/lib/components/Button";
-import { TextField } from "@fluentui/react/lib/components/TextField";
+import { Icon } from "@fluentui/react/lib/Icon";
+import { PrimaryButton } from "@fluentui/react/lib/Button";
+import { TextField } from "@fluentui/react/lib/TextField";
 import * as telemetry from '../../common/telemetry';
 import { isEqual } from "@microsoft/sp-lodash-subset";
 

src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx

@@ -11,7 +11,7 @@ import * as strings from 'ControlStrings';
 import {
   DefaultButton, IButtonStyles, IconButton, PrimaryButton
 } from '@fluentui/react/lib/Button';
-import { IIconProps } from '@fluentui/react/lib/components/Icon';
+import { IIconProps } from '@fluentui/react/lib/Icon';
 import { Label } from '@fluentui/react/lib/Label';
 import {
   Panel,

src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
-import { BasePicker } from '@fluentui/react/lib/components/pickers/BasePicker';
 import { IModernTermPickerProps,
          ITermItemProps
        } from './ModernTermPicker.types';
 import { TermItem } from '../termItem/TermItem';
 import { TermItemSuggestion } from '../termItem/TermItemSuggestion';
-import { IBasePickerStyleProps,
-         IBasePickerStyles
-       } from '@fluentui/react/lib/components/pickers/BasePicker.types';
-import { getStyles } from '@fluentui/react/lib/components/pickers/BasePicker.styles';
+
 import { initializeComponentRef,
          styled
        } from '@fluentui/react/lib/Utilities';
-import { ISuggestionItemProps } from '@fluentui/react/lib/components/pickers/Suggestions/SuggestionsItem.types';
+
 import { ITermInfo } from '@pnp/sp/taxonomy';
+import { BasePicker, IBasePickerStyleProps, IBasePickerStyles, ISuggestionItemProps } from '@fluentui/react/lib/Pickers';
+import { getStyles } from '@fluentui/react/lib/components/pickers/BasePicker.styles';
 
 export class ModernTermPickerBase extends BasePicker<ITermInfo, IModernTermPickerProps> {
   public static defaultProps = {

src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.types.ts

@@ -1,9 +1,8 @@
 import { ITermInfo, ITermStoreInfo } from '@pnp/sp/taxonomy';
-import { IBasePickerProps } from '@fluentui/react/lib/components/pickers/BasePicker.types';
-import { IPickerItemProps } from '@fluentui/react/lib/components/pickers/PickerItem.types';
 import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { IReadonlyTheme } from '@microsoft/sp-component-base';
+import { IBasePickerProps, IPickerItemProps } from '@fluentui/react/lib/Pickers';
 
 export interface IModernTermPickerProps extends IBasePickerProps<ITermInfo> {
   themeVariant?: IReadonlyTheme;

src/controls/modernTaxonomyPicker/termItem/TermItem.styles.ts

@@ -1,7 +1,7 @@
-import { ButtonGlobalClassNames } from "@fluentui/react/lib/components/Button/BaseButton.classNames";
 import { getFocusStyle, getGlobalClassNames, HighContrastSelector } from "@fluentui/react/lib/Styling";
 import { getRTL } from "@fluentui/react/lib/Utilities";
 import { ITermItemStyleProps, ITermItemStyles } from "../modernTermPicker/ModernTermPicker.types";
+import { ButtonGlobalClassNames } from "@fluentui/react/lib/Button";
 
 const GlobalClassNames = {
   root: 'ms-TagItem',

src/controls/modernTaxonomyPicker/termItem/TermItem.tsx

@@ -1,8 +1,9 @@
-import { IconButton } from '@fluentui/react/lib/components/Button/IconButton/IconButton';
+
 import { classNamesFunction, styled } from '@fluentui/react/lib/Utilities';
 import * as React from 'react';
 import { ITermItemProps, ITermItemStyleProps, ITermItemStyles } from '../modernTermPicker/ModernTermPicker.types';
 import { getStyles } from './TermItem.styles';
+import { IconButton } from '@fluentui/react/lib/Button';
 
 const getClassNames = classNamesFunction<ITermItemStyleProps, ITermItemStyles>();
 

src/controls/monacoEditor/Error.tsx

@@ -1,5 +1,5 @@
 
-import { Stack } from "@fluentui/react/lib/components/Stack";
+import { Stack } from "@fluentui/react/lib/Stack";
 import { MessageBarType, MessageBar } from "@fluentui/react/lib/MessageBar";
 import * as React from "react";
 

src/controls/peoplepicker/IPeoplePicker.ts

@@ -1,6 +1,5 @@
-import { IBasePickerStyles } from "@fluentui/react";
-import { DirectionalHint } from "@fluentui/react/lib/common/DirectionalHint";
-import { IPersonaProps } from "@fluentui/react/lib/components/Persona/Persona.types";
+import { IBasePickerStyles, IPersonaProps } from "@fluentui/react";
+import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { IPeoplePickerContext, PrincipalType } from ".";
 
 /**

src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -6,13 +6,12 @@ import SPPeopleSearchService from "../../services/PeopleSearchService";
 import { IPeoplePickerProps } from './IPeoplePicker';
 import { TooltipHost } from '@fluentui/react/lib/Tooltip';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
-import { NormalPeoplePicker } from '@fluentui/react/lib/components/pickers/PeoplePicker/PeoplePicker';
-import { Label } from '@fluentui/react/lib/components/Label';
-import { IBasePickerSuggestionsProps } from "@fluentui/react/lib/components/pickers/BasePicker.types";
-import { IPersonaProps } from "@fluentui/react/lib/components/Persona/Persona.types";
+import { Label } from '@fluentui/react/lib/Label';
 import FieldErrorMessage from '../errorMessage/ErrorMessage';
 import isEqual from 'lodash/isEqual';
 import uniqBy from 'lodash/uniqBy';
+import { IPersonaProps } from '@fluentui/react/lib/Persona';
+import { IBasePickerSuggestionsProps, NormalPeoplePicker} from '@fluentui/react/lib/Pickers';
 
 interface IPeoplePickerState {
   mostRecentlyUsedPersons?: IPersonaProps[];