Modern SPFx on SharePoint 2019

February 12, 2020

SharePoint Framework (SPFx) allows developers to create modern applications (web parts) that can seamlessly integrate into a SharePoint environment to provide business solutions for users. Developers can use modern frameworks like React with Typescript out of the box.

The latest version of SPFx (1.10 at the time of writing) supports React 16.7 and Typescript 3.3. This is great, but we do miss out on some of the latest paradigms such as the hooks and context APIs in React.

While SharePoint Online (SPO) supports the latest versions of SPFx, officially, SharePoint 2019 only supports up to version 1.4.1. This is quite an issue as this version only supports React 15.6 and Typescript 2.4, meaning a lot of other packages will require old versions.

Another limiting factor is the Office UI Fabric React library that ships is stuck on 5.21 whereas the latest (7.9) has a lot of bug fixes that we miss out on.

The main problem here is that because SPFx is locked to a specific version of React, we cannot use a later version of typescript as React doesn't support it. And because we don't have the latest versions of React OR Typescript, we are locked to a lower version of Fabric as well.

Using any package

Luckily we get around these limitations by modifying the gulp script and specifying later versions of those packages in our installed modules.

package.json

{
    // ... meta
    // ... scripts
    "dependencies": {
        "@microsoft/sp-core-library": "1.4.1",
        "@microsoft/sp-lodash-subset": "1.4.1",
        "@microsoft/sp-office-ui-fabric-core": "1.4.1",
        "@microsoft/sp-webpart-base": "1.4.1",
        // add own versions of react as dependencies
        "react": "16.12.0",
        "react-dom": "16.12.0",
        
        // add fabric
        "office-ui-fabric-react": "7.90.0",
    },
    
    // REQUIRED FOR YARN
    // add resolutions for react types, fabric and typscript for yarn to be able to use our 
    // specified versions, instead of bundled peer dependencies in sub packages
    "resolutions": {
        "@types/react": "16.9.5",
        "typescript": "^3.6.3",
        "office-ui-fabric-react": "^7.45.1"
    },
    
    "devDependencies": {
        "@types/es6-promise": "0.0.33",
        "@types/webpack-env": "1.13.1",
        "@types/chai": "3.4.34",
        "@types/mocha": "2.2.38",
        "@microsoft/sp-build-web": "1.4.1",
        "@microsoft/sp-module-interfaces": "1.4.1",
        "@microsoft/sp-webpart-workbench": "1.4.1",
        "ajv": "~5.2.2",
        "gulp": "~3.9.1",
        
        // add react types and typescript as dev dependencies
        "@types/react": "16.9.19",
        "@types/react-dom": "16.9.0",
        "typescript": "3.7.5"
    }
}

Installing the above will grant us access to the packages in our dev environment, however, SPFx has a built-in webpack operation that strips out included versions of React by default, and locks it to the version used in the SharePoint environment. This will cause any code that leverages newer features not available in these versions to blow up.

Luckily, we can edit the gulp script to tell web pack to ignore that rule and bundle in our specified versions:

gulpfile.js

'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(/Warning - \[sass\] The local CSS class .* is not camelCase and will not be type-safe./gi);
// force use of projects specified typescript version
const typeScriptConfig = require('@microsoft/gulp-core-build-typescript/lib/TypeScriptConfiguration');
typeScriptConfig.TypeScriptConfiguration.setTypescriptCompiler(require('typescript'));
// force use of projects specified react version
build.configureWebpack.mergeConfig({
    additionalConfiguration: (generatedConfiguration) => {
        generatedConfiguration.externals = generatedConfiguration.externals
            .filter(name => !(["react", "react-dom"].includes(name)))
        return generatedConfiguration;
    }
});
build.initialize(gulp);

Now when the project is built and packaged it will include our version of React. This means that we can safely use the latest Typescript, which in turn means that we can use the latest version of Fabric as well.

Fabric

The only issue we have found so far is that there are some slight naming conflicts with the default theme in the version of fabric that is embedded in SharePoint 2019. The workaround we have in place for this is to force default values in the components we use our project:

index.tsx

import { loadTheme } from "@uifabric/styling";
import { themeRulesStandardCreator } from "office-ui-fabric-react";
// this forces a default theme that loads in the new base 
// theme object so values are available to new fabric components
loadTheme(themeRulesStandardCreator());

In Prod

← Back to Posts

Modern SPFx on SharePoint 2019

Using any package

Fabric