3

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.

Some User
  • 5,257
  • 13
  • 51
  • 93

1 Answers1

0

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.

Jason Gore
  • 181
  • 4
  • There is an explicit dependency on `@types/react` however, it's set to version 16.7.18. If I change it to 16.8+ it basically opens a rabbit hole of dependency and code changes. This implies that something is wrong. – Some User Aug 05 '19 at 12:32
  • As I mentioned, Fabric 7's min version of React is 16.8. You'll need to supply a version of React that's >= 16.8 as a peer dependency, which will also require `@types/react` of >= 16.8 in order to prevent type errors. If your project is having errors with React 16.8, you can either upgrade it to support 16.8 or use Fabric 6. You can also use the command `npm init uifabric` (followed by `yarn` and `yarn start`) to see how Fabric can be used in a sample repo, as well. – Jason Gore Aug 06 '19 at 15:12