Sp-dev-docs: Office UI Fabric React usingatude

[Katli95]

Category

• [X] Question

As always, love the great work guys!

TL;DR

office-ui-fabric-react versioning documentation is confusing.
Should I include it explicitly or not in a project updated from v1.8.1 to v1.8.2?

What exactly do I have to do to include the latest release of office-ui-fabric-react into my solution? (if it is indeed 'safe' to do so)

Should I leave everything as is or should I add it to the package.json? (via npm ofc)
and if I do, do I need to update TypeScript as well?

Details

The v1.8.2 release notes have this to say on the subject of office-ui-fabric-react

• For the react scaffolded projects, we now explicitly add office-ui-fabric-react version 6 to package.json. We were finding a common pattern where people were not adding OUIFR to package.json, but were using it.
  
  
  
  • Because it wound up in the node_modules because of downstream dependencies, the solution would compile, but later on when the solution was upgraded to use a different version of the framework, a different version of OUIFR would suddenly get used.
  
  
  • In general, using packages like this (via shadow dependencies) is a bad thing. You are more than welcome to remove the reference in package.json if you are not using OUIFR in your solution, or change the version if needed. We also bumped the typings for react and react DOM to match the versions of React / React DOM.
  
  

Yet, the official walkthrough has this to say:

With the current release of the SharePoint Framework, we recommend that you use the Office UI Fabric and Fabric React that ships with the generator. We do not recommend that you update the Office UI Fabric and Fabric React packages independently because that might conflict with the already available version in SharePoint, and as a result, your web part may fail to function as expected.

location in document

but it also says:

Starting with SharePoint Framework 1.8, you can use either Office UI Fabric version 5 or version 6. In this case we are using specifically Office UI Fabric version 5.132.0, so we are adding the needed dependency on it. If you would be using Office UI Fabric version 6.x, you'd also need to update the used TypeScript version of the solution.

just slightly above.

right now my package.json looks like this after updating to v1.8.2 from v.1.8.1:

{
  "dependencies": {
    "@microsoft/sp-core-library": "1.8.2",
    "@microsoft/sp-lodash-subset": "1.8.2",
    "@microsoft/sp-office-ui-fabric-core": "1.8.2",
    "@microsoft/sp-property-pane": "1.8.2",
    "@microsoft/sp-webpart-base": "1.8.2",
    "@pnp/common": "^1.2.9",
    "@pnp/graph": "^1.2.9",
    "@pnp/logging": "^1.2.9",
    "@pnp/odata": "^1.2.9",
    "@pnp/sp": "^1.2.9",
    "@pnp/spfx-controls-react": "^1.13.0",
    "@pnp/spfx-property-controls": "^1.14.1",
    "@types/enzyme-adapter-react-16": "^1.0.5",
    "@types/es6-promise": "0.0.33",
    "@types/react": "16.7.22",
    "@types/react-dom": "16.8.0",
    "@types/webpack-env": "1.13.1",
    "react": "16.7.0",
    "react-dom": "16.7.0"
  },
  "resolutions": {
    "@types/react": "16.4.2"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-2.9": "0.7.7",
    "@microsoft/sp-build-web": "1.8.2",
    "@microsoft/sp-module-interfaces": "1.8.2",
    "@microsoft/sp-tslint-rules": "1.8.2",
    "@microsoft/sp-webpart-workbench": "1.8.2",
    "@types/chai": "3.4.34",
    "@types/enzyme": "3.1.15",
    "@types/jest": "22.2.3",
    "@types/mocha": "2.2.38",
    "@types/sinon": "5.0.7",
    "ajv": "~5.2.2",
    "enzyme": "3.8.0",
    "enzyme-adapter-react-16": "1.7.1",
    "gulp": "~3.9.1",
    "identity-obj-proxy": "3.0.0",
    "jest": "22.4.3",
    "jest-junit": "5.2.0",
    "react-test-renderer": "16.6.3",
    "sinon": "5.0.7",
    "ts-jest": "22.4.5"
  }
}

my package-lock.json has a reference to office-ui-fabric-react v6.143 which is the latest release.

Edit

As can be seen in the package.json I'm also using @pnp/spfx-controls-react v1.13.0 which uses office-ui-fabric-react v5.131.0. Seemingly that version is used when importing into my own components and it confirmed by looking at the node_modules.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[patmill]

Sorry for the confusion - we need to improve our documentation around this. You should always explicitly include OUIFR in your package.json if you are using it. Don't rely on it being there because another package brought it in. If you were starting from scratch, I would suggest using 6.143.0 - it's the version that was current when the build was made. There are newer versions now, and it should be OK to use them (don't use anything from version 7 though).

Given your use of PNP, I would put version 5.131.0 in your package.json. That will ensure that all your react / fabric controls line up.

[Katli95]

@patmill Thanks for your swift reply!

I have been experiencing some bugs with v5.131.0 that have been fixed in later releases of v6.* (specifically this one).

I admit don't have a full understanding of how npm deals with this sort of thing. But is there some way to use this more recent version of a specific control from OUIFR, namely the SearchBox in my case and still maintain v5.131.0 for the PnP solution? Or do you see a different way for me to satisfy this requirement?

Thanks for the help Pat, really appreciate it!

[patmill]

Let me get some people more knowledgeable in Fabric. I believe it should work to use PNP (on 5.131) but have your package json and your code use 6, but I'll have them confirm.

[KevinTCoughlin]

@Katli95 first of all, thanks for reaching out and the cheer 👏. A few questions for help w/ debug:

Would you happen to have a repro branch you can share?

What version of office-ui-fabric-react do you plan to use? Latest is 6.181.0.

Am I understanding correctly that @pnp/spfx-controls-react is bringing in an older version of office-ui-fabric-react and you'd like to use latest at least in your app code.

TypeScript compatibility

You can view [email protected]'s TypeScript compatibility at https://aka.ms/FabricCompat

I can run it against a specific version of the library if you'd like. Its running nightly since we publish daily.

cc: @aditima

[KevinTCoughlin]

@patmill do you think the above compatibility information would be a useful addition to https://github.com/SharePoint/sp-dev-docs/pull/3800?

[Katli95]

@KevinTCoughlin Many thanks for the detailed response!

Unfortunately no, I'm not allowed to share the project :/

But yeah, your understanding is spot on! I'd like to use the latest version of office-ui-fabric-react but @pnp/spfx-controls-react is bringing in v5.*

Is @patmill correct in thinking I can add OUIFR v6.181.0 to my package.json and the package manager will handle the rest? i.e. @pnp/spfx-controls-react will use the old version and I can use the new?

Sidenote: I'm using SPFx v1.8.2 so I'm pretty sure I'm running TypeScript v2.9.

[andrewconnell]

@Katli95 said:

correct in thinking I can add OUIFR v6.181.0 to my package.json and the package manager will handle the rest? i.e. @pnp/spfx-controls-react will use the old version and I can use the new?

I'm not sure you can do that... @estruyf (who's behind the PnP controls package), can you comment on this? I thought there was some effort to get the PnP package updated to the latest OUIFR... I don't believe you can mix the two versions at the same time...

[Katli95]

Any solution/progress on this? O:)

[andrewconnell]

@Katli95 You're probably best posting that specific question about the PNP library to it's own issue list as this is more for SharePoint / SharePoint specific dev stuff and the PnP library is a library provided by & for the community with no support from MSFT.

[Katli95]

Great, will do! Thanks for the help, feel free to either close the issue or keep it open as a reference to where I found the docs to be a bit unclear :)

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues