Using React Hooks and the latest Office UI Fabric in SharePoint Framework (SPFx) Projects

How to not be hindered by SPFx’s old Typescript compiler or the version of React that SP Online uses.

The latest SharePoint development paradigm, SharePoint Framework (SPFx), is currently stuck on an old version of the Typescript compiler. This means that if you try to import newer libraries that use new Typescript syntax in their type definitions, it won’t compile.

Unfortunately, this is a major issue for two libraries that are heavily used in SPFx.

• React.js
• Microsoft Office UI Fabric

https://github.com/SharePoint/sp-dev-docs/issues/2924

If you suddenly see a bunch of errors like below when you build, it is probably because you are attempting to compile modern Typescript definition files with an old Typescript compiler.

You’ll probably see a mass of wierd errors like this if you use an old TypeScript compiler to build a modern library.

How to fix the SPFx Build

AKA, How to use the latest TypeScript compiler

The solution depends on which version of SPFx your project uses.

SPFx 1.8 or greater

With SPFx 1.8 Microsoft switched their build process to use the @microsoft/rush-stack-compiler package. There is a version of this package out on NPM for each version Typescript.

Helpfully, Microsoft provided a mechanism for SPFx developers to easily swap out which version of the `@microsoft/rush-stack-compiler they want to use.

1. Go pick out which version you want using NPM search to see the options: https://www.npmjs.com/search?q=%40microsoft%2Frush-stack-compiler
2. Install that version as a Dev Dependency in your project:

npm install --save-dev @microsoft/rush-stack-compiler-3.3

3. Update the tsconfig.json file at the root of your project to point at the new version.

You should see something like this:

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

Replace it with your version

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

Less than SPFx 1.8 but greater than SPFx 1.4.1

If you are on an older version of SPFx (1.4.1 < YOU < 1.8), the steps are a little different.

1. Install typescript as a Dev Dependency in your project,this will give you the latest version of the TypeScript compiler.

npm install --save-dev typescript

2. Update your gulpfile.js to include the following

build.tscCmd.mergeConfig({
  overridePackagePath: "node_modules/typescript",
});

SPFx 1.4.1 (or less?)

If you are stuck on SPFx 1.4.1 you can still do it, but the steps are a little more “hacky”.

Thanks to Brad Schlintz for pointing out that SPFx 1.4.1 does not have the tscCmd mentioned above.

1. Install typescript and rimraf as dev dependencies in your project,typescript being the latest TypeScript compiler and rimraf being an easy cross platform way to forcibly delete folders.

npm install --save-dev typescript rimraf

2. Add a fixbuild task the the end of the scripts section in your package.json

"scripts" : {  
  ...  
  "fixbuild": "rimraf .\\node_modules\\@microsoft\\gulp-core-build-typescript\\node_modules\\typescript"
}

3. Any time you do an npm install (or see all those scary build errors), perform a npm run fixbuild and then try building again.

How does this work?

When we build, SPFx tries to perform a TypeScript build, and the first place it looks for a TypeScript compiler is it’s own node_modules folder. But with the fixbuild task, we’ve snuck in an deleted it (it was the old one that was giving us fits).

Since SPFx can’t find a TypeScript compiler in it’s own node_modules it bubbles up to look in our project’s node_modules folder. And since we installed the latest TypeScript compiler as a dev dependency, it finds that one and uses it. Build problems solved.

How to use React Hooks in Production

Another thing I find frustrating is being limited by what version of React we can use in SPFx projects. React Hooks have been officially released and they are AWESOME! I want to use them in my SPFx projects.

By default, the SPFx compiler says:

“Oh hey, I see you’re using React. But actually, SP Online already is using React, so no point including it in your bundle too. Anytime you ask for React, I’ll just give you the same one SP Online already uses.”

This is usually a really nice feature because it keeps the bundle sizes down. But if we want to use React hooks, it breaks us because the bundler is hot-swapping in an older version of React.

To resolve this, you need to first install the latest react and react-dom, as well their latest typings.

npm install react@latest react-dom@latest
npm install --save-dev @types/react @types/react-dom

Next, update your gulpfile.js to tell the SPFx bundler to NOT do the whole, “let me pull React out of your bundle and give you the SPOnline one” thing. Keep in mind, your bundle will be larger, so weigh the costs.

Done. You can now use whatever version of React you want, even in Production.