Corey Roth [MVP]

If you have ever used Office Fabric with SPFx, you may have found yourselves struggling.  You quickly learned than previous version of SPFx did not work with version 6+ of Office.  Instead you had to use the LTS version of Office Fabric which varies significantly from version 6.  What make this such a pain point is that there isn't really any documentation on the Office Fabric site that tells you that.  Instead you just installed it, tried it out, and couldn't figure out why things weren't working until you did an Internet search.  In addition what made things even harder is that many of the parameter and function names have changed between version 5 and 6.  The documentation only covers what's in version 6.  Some functionality flat-out isn't there in version 5 and you had to find work-arounds.  This pain ends today with SPFx 1.8.

First, install the latest version of SharePoint Framework 1.8 by running the following:

npm install -g @microsoft/generator-sharepoint

Once it completes, start a new project or follow the instructions in the release notes on how to migrate your existing project.  Start a new branch if you are migrating an existing project.

Now install Office Fabric with the following command:

npm install office-ui-frabric-react

Now, add your favorite Office Fabric React code for buttons, pickers, command bars, etc.  Finally run gulp serve.  Unfortunately, you'll still see the errors in merge-styles that we have always gotten when trying to use v6 of Fabric React.  That's because Fabric React needs a newer version of TypeScript.  SPFx 1.8 now supports TypeScript 2.7.2 by default.  That's not good enough. Luckily, we can use other versions of TypeScript now.  I tried to use 3.3 but couldn't get it to work.  However, I could get it to work by using 3.0.  Here's how you do that.

In your package.json file, replace the @microsoft/rush-stack-compiler-2.7 dependency with 3.0 as follows:

"@microsoft/rush-stack-compiler-3.0": "0.5.9"

Now, update your tsconfig.json and change the extends line to the following:

"extends": "./node_modules/@microsoft/rush-stack-compiler-3.0/includes/tsconfig-web.json",

Now run the following command:

npm install

Your Fabric React 6 components should now be working when you run your project again.  Here's my example with a command bar and a button:

If you want to look at my code changes, you can see them in this simple repo.

These are exciting times and this should make working with Office Fabric React much easier.