SPFx with Office UI Fabric

Question

I am trying to create an SPFx solution with office ui Fabric/Fluent UI. I read somewhere that in higher versions of SPFx with react come with pre installed office ui fabric components with in them. So when I created the default SPFx with yeoman generator it created "office-ui-fabric-react": "7.156.0" in the package.json. but when I tried to import text boxes or buttons, it says that module'@fluentui/react/lib/TextField' not found. My SPFx version is 1.12.0. I created the entry of "@fluentui/react": "7.111.0", in my package.json and error was resolved, but when I run the SPFx it shows the component not found error. my node version is 10.18 My question is, is there any specifc version which I should use to run SPFx with office ui fabric? is office UI fabric and fluent UI are same? Please guide me about the correct versions so that I can fluent ui controls.

Answer 1

You should use provided Office UI Fabric React package in SPFx 1.12.1, this is the way Microsoft supports now. Yes, Fluent UI and Office UI Fabric are the same.

Microsoft renamed Office UI Fabric to Fluent UI in early 2020

The primary Fluent UI React package, @fluentui/react, simply exports components from the office-ui-fabric-react package used in SharePoint Framework projects. At this time, you should continue to use the office-ui-fabric-react package in your SharePoint Framework projects.

More details here: Office UI Fabric React & Fluent UI React

Answer 2

Fluent UI version 7.178.1, would be supported by SPFX. Try installing the specific version it will solves the problem.