SPFx: How to test for the 3 SharePoint flavors: Classic, New Experience and SPFx

Question

When injecting code in the New Experiences (only possible with Browser Extension)
I use:

    var isClassicSharePoint = typeof SP !== 'undefined';

So my generic library knows when to use SP.SOD and other stuff

Now SPFx does have a SP object... its just not the Classic SP Object

Question:

• What is the most reliable way of determining the 3 versions of SharePoint we now have?

Answer 1

Well, for the new webparts, you can look at the context.Environment variable.

Answer 2

Look at the this.context.environment.type, which will be a value in the EnvironmentType enumeration, which you can import:

import { EnvironmentType } from '@microsoft/sp-client-base';

This will have a value of Local, SharePoint, ClassicSharePoint or Test, depending on where the web part is running. You can then test:

if (this.context.environment.type === EnvironmentType.Local) { ...

Note, if you choose the React starter web part you won't be able to use this - you need this in the context of the web part class that creates the React component. You can pass the environment or the context through the properties when you create the component.