3

add office-ui-fabric-react package in SPFX react webpart using

<!-- language: lang-ps -->

npm --save install office-ui-fabric-react

then add

<!-- language: lang-ts -->

import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
import './SearchBox.Small.Example.scss';`

then run gulp serve command and following error occurred

<!-- language: lang-none -->

Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(18,59): error TS1005: ',' expected.
Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(18,61): error TS1005: '>' expected.
Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(18,63): error TS1109: Expression expected.
Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(23,63): error TS1005: ',' expected.
Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(30,19): error TS1005: ':' expected.
Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(18,89): error TS2304: Cannot find name 'P'.
Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(18,92): error TS2304: Cannot find name 'S'.
Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(29,41): error TS2304: Cannot find name 'boolean'.
Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(56,24): error TS2304: Cannot find name 'string'.
Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(60,37): error TS2693: 'IDisposable' only refers to a type, but is being used as a value here.

Error - typescript - node_modules\office-ui-fabric-react\lib\components\Button\Button.Props.d.ts(13,44): error TS2694: Namespace 'React' has no exported member 'AllHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\Button\Button.Props.d.ts(123,22): error TS2694: Namespace 'React' has no exported member 'ButtonHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\Button\Button.Props.d.ts(123,70): error TS2694: Namespace 'React' has no exported member 'AnchorHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\Calendar\Calendar.d.ts(20,8): error TS2411: Property 'dayPicker' of type 'CalendarDay' is not assignable to string index type 'ReactInstance'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\Calendar\Calendar.d.ts(21,8): error TS2411: Property 'monthPicker' of type 'CalendarMonth' is not assignable to string index type 'ReactInstance'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\Checkbox\Checkbox.Props.d.ts(15,46): error TS2694: Namespace 'React' has no exported member 'ButtonHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\Checkbox\Checkbox.Props.d.ts(53,23): error TS2694: Namespace 'React' has no exported member 'ButtonHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\ChoiceGroup\ChoiceGroup.Props.d.ts(5,49): error TS2694: Namespace 'React' has no exported member 'InputHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\CommandBar\CommandBar.d.ts(22,8): error TS2411: Property 'focusZone' of type 'FocusZone' is not assignable to string index type 'ReactInstance'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\DatePicker\DatePicker.d.ts(17,8): error TS2411: Property 'textField' of type 'TextField' is not assignable to string index type 'ReactInstance'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\DetailsList\DetailsHeader.d.ts(57,8): error TS2411: Property 'root' of type 'FocusZone' is not assignable to string index type 'ReactInstance'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\Dropdown\Dropdown.d.ts(20,8): error TS2411: Property 'focusZone' of type 'FocusZone' is not assignable to string index type 'ReactInstance'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\Facepile\Facepile.Props.d.ts(43,48): error TS2694: Namespace 'React' has no exported member 'ButtonHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\FocusZone\FocusZone.Props.d.ts(50,30): error TS2694: Namespace 'React' has no exported member 'ReactHTML'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\GroupedList\GroupedList.d.ts(19,8): error TS2411: Property 'list' of type 'List' is not assignable to string index type 'ReactInstance'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\HoverCard\HoverCard.Props.d.ts(9,17): error TS2430: Interface 'IHoverCardProps' incorrectly extends interface 'HTMLAttributes<HTMLDivElement | HoverCard>'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\Image\Image.Props.d.ts(3,43): error TS2694: Namespace 'React' has no exported member 'ImgHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\Label\Label.Props.d.ts(3,43): error TS2694: Namespace 'React' has no exported member 'LabelHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\Link\Link.Props.d.ts(6,42): error TS2694: Namespace 'React' has no exported member 'AllHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\Rating\Rating.Props.d.ts(6,44): error TS2694: Namespace 'React' has no exported member 'AllHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\SearchBox\SearchBox.Props.d.ts(7,47): error TS2694: Namespace 'React' has no exported member 'InputHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\TextField\TextField.Props.d.ts(28,47): error TS2694: Namespace 'React' has no exported member 'AllHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\pickers\AutoFill\BaseAutoFill.Props.d.ts(40,50): error TS2694: Namespace 'React' has no exported member 'InputHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\pickers\BasePicker.Props.d.ts(177,43): error TS2694: Namespace 'React' has no exported member 'InputHTMLAttributes'.
Error - typescript - node_modules\office-ui-fabric-react\lib\components\pickers\PickerItem.Props.d.ts(1,51): error TS2694: Namespace 'React' has no exported member 'AllHTMLAttributes'.

Error - 'typescript' sub task errored after 3.27 s
 "TypeScript error(s) occurred."
Improve this question
1
  • 1
    same issue here, just upgraded from 2.34.2 to 4.32 and started getting this error
    – RussGove
    Commented Sep 1, 2017 at 13:07

1 Answer 1

Reset to default
0

I had exactly the same problem. Looks like SPFx is on Typescript 2.2 and using that to build your webpart. The latest version of Fabric UI React seems only to work with Typescript 2.4+ of what I've read. Didn't find a way to upgrade the typescript version used with spfx so I reverted to the Fabric UI React which ships with the SPFx webpart (you don't have to install this in your package,json) and it is working again.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.