Unable to add Office UI Fabric React Components to Existing Project

3
votes

I attempted to add the Office UI Fabric React Components to an Existing Project. My project is a new ASP.NET Core Web Application created via Visual Studio 2019. This project was created using ASP.NET Core 3.0 (preview 7) via the React.js and Redux template. Once launched, I then followed the Fabric React - Add to Existing Project docs.

  1. I navigated to the ClientApp directory in the created web project.
  2. Executed npm install office-ui-fabric react --save. This resulted in over 1,000 vulnerabilities being discovered.
  3. Opened the ./ClientApp/src/components/Home.tsx file.
  4. Added the line `import {PrimaryButton} from 'office-ui-fabric-react';
  5. Ran the app

This generated the following error:

Failed to compile
Type error: Namespace 'React' has no exported member 'ElementType'. TS2694

15 | * Slottable version of React.ReactType
16 | */
17 | export declare type ISlottableReactType<TProps extends ValidProps, TShorthandPromp extends ValidShorthand> = React.ElementType<TProps> & ISlotCreator<TProps, TShorthandProp>;
   |
18 | /**
19 |  * Props generated by Foundation.
20 |  */

Please note: the app worked fine before I added the Office UI Fabric React components.

1
reactjsoffice-ui-fabric

1 Answers

0
votes

Please note Fabric 7 requires a minimum of React 16.8.1 and TypeScript 3.3. Does your project have an explicit dependency on @types/react? If so, it must also be 16.8+. React.ElementType was recently added to React types so this seems to indicate that the React typings in your project do not meet the minimum version requirements for Fabric 7.