Fluentui: Error when use with SharePoint Framework 1.7.0

[bva999]

• __Package version(s)__: 6.101.0
• __Browser and OS versions__: --

Please provide a reproduction of the bug in a codepen:

1) Upgrade SFPX solution to version 1.7.0
2) Remove old office-ui-fabric-react (npm uninstall office-ui-fabric-react, npm uninstall @uifabirc/icons)
3) Install office-ui-fabric-react@lates
4) When trying to build (keep in mind SPFX uses TS 2.4.2) I get the following error message:

Error - [tsc] node_modules/office-ui-fabric-react/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(15,67): error TS1005: ';' expected.
Error - [tsc] node_modules/office-ui-fabric-react/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(15,114): error TS1005: '(' expected.
Error - [tsc] node_modules/office-ui-fabric-react/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(15,136): error TS1005: '(' expected.

package.json:

dependencies": {
    "@microsoft/decorators": "1.7.0",
    "@microsoft/sp-core-library": "1.7.0",
    "@microsoft/sp-listview-extensibility": "1.7.0",
    "@microsoft/sp-lodash-subset": "1.7.0",
    "@microsoft/sp-webpart-base": "1.7.0",
    "@pnp/pnpjs": "^1.2.4",
    "@pnp/spfx-controls-react": "1.10.0",
    "@types/es6-promise": "0.0.33",
    "@types/react": "16.4.2",
    "@types/react-circular-progressbar": "^1.0.1",
    "@types/react-dom": "16.0.5",
    "@types/webpack-env": "1.13.1",
    "docxtemplater": "^3.9.2",
    "file-saver": "^1.3.8",
    "moment-timezone": "^0.5.23",
    "office-ui-fabric-react": "^6.100.2",
    "react": "16.3.2",
    "react-activity": "^1.2.2",
    "react-circular-progressbar": "^1.0.0",
    "react-dom": "16.3.2",
    "react-file-reader": "^1.1.4",
    "react-rte": "^0.16.1",
    "save": "^2.3.2",
    "xlsx": "^0.14.0"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.7.0",
    "@microsoft/sp-module-interfaces": "1.7.0",
    "@microsoft/sp-webpart-workbench": "1.7.0",
    "@types/chai": "3.4.34",
    "@types/file-saver": "1.3.0",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "css-loader": "^1.0.1",
    "gulp": "~3.9.1",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.18.2",
    "tslint-microsoft-contrib": "^5.2.1",
    "webpack-bundle-analyzer": "^3.0.3"
  }
}

Actual behavior:

Build fails with provided error message.

Expected behavior:

Build to succeed.

[kenotron]

SharePoint needs to use the latest 5.x release from OUFR. We are working with them to get this upgrade but it will take time in their part.

[kenotron]

Please feel free to close this bug if your question has been answered.

[micahgodbolt]

To my understanding SPFX 1.7.0 is still not on React 16, and therefore does not support Fabric 6.x.

[coreyroth]

SPFX 1.7 actually uses React 16 so that’s not the underlying issue any longer.

[micahgodbolt]

How have you confirmed this? Everyone I've spoken to is saying that they are still working on React 16 support, as well as TypeScript 2.7 support. Both of which are needed to properly use Fabric 6.x

[coreyroth]

I created a new project with the generator and the packages reference React 16. It still uses TypeScript 2.4.2 though.

[micahgodbolt]

Hmm, I'll check into that. Either my info is out of date, or the generator jumped the gun.

[cliffkoh]

Unfortunately, SPFx also needs to be on TypeScript >=2.8 to be able to consume Fabric 6... a workaround is if you install @uifabric/merge-styles as an explicit dependency at verison 6.8.1, and office-ui-fabric-react at version 6.57.0.

I believe this combination should stand a good chance of working with SPFx 1.7.0.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[kurtnelle]

Unfortunately, SPFx also needs to be on TypeScript >=2.8 to be able to consume Fabric 6... a workaround is if you install @uifabric/merge-styles as an explicit dependency at verison 6.8.1, and office-ui-fabric-react at version 6.57.0.

I believe this combination should stand a good chance of working with SPFx 1.7.0.

Have you actually done this and confirmed it working?

[michaelmaillot]

Hi @kurtnelle,

I tried @cliffkoh solution but the errors still appear.

The only solution I've found is to use the lts version (5.134.0) that comes with @uifabric/merge-styles 6.8.1.

[cliffkoh]

There are multiple things that could be at play that explains why the errors still occur. In theory it shouldn't just because 6.8.1 doesn't have the offending TypeScript code that forces TypeScript 2.8.2, so it could be instead due to a variety of other factors (which would necessitate looking at the NPM/node modules tree to figure out of there was another version of merge-styles being loaded instead).

By the way, as far as I know (but I may be wrong), an upcoming release of SPFx should support at least TypeScript 2.9 and so this problem should go away. @VesaJuvonen or @patmill can speak more accurately to this.

[peterremote1980]

any solution? I meet this bug now.

[coreyroth]

Fabric React works with SPFx 1.8 now. See this post for implementation details.

Using Fabric React 6 with SPFx 1.8

[Dangerous-Mind]

@bva999

Version SPFx 1.8
Same problem:

[17:33:33] [tslint] tslint version: 5.11.0
[17:33:33] Starting subtask 'tsc'...
[17:33:33] [tsc] typescript version: 2.7.2
[17:33:38] Error - [tsc] node_modules/@uifabric/foundation/lib/ISlots.d.ts(68,124): error TS1005: ')' expected.
[17:33:38] Error - [tsc] node_modules/@uifabric/foundation/lib/ISlots.d.ts(68,177): error TS1005: '(' expected.
[17:33:38] Error - [tsc] node_modules/@uifabric/foundation/lib/ISlots.d.ts(68,185): error TS1005: ':' expected.
[17:33:38] Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(15,67): error TS1005: ';' expected.
[17:33:38] Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(15,114): error TS1005: '(' expected.
[17:33:38] Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(15,136): error TS1005: '(' expected.
[17:33:38] Error - 'tsc' sub task errored after 4.8 s 
 exited with code 2
[17:33:38] Finished subtask 'tslint' after 5.05 s

[baywet]

@Dangerous-Mind your log shows you're still on typescript 2.7.2. Read the blog post @coreyroth pointed and switch to rush stack 3.0 or higher, this should solve your issue :)

[patmill]

Or use version 5.132.0 of office-ui-fabric-react

[Dangerous-Mind]

Yeah. I had done what @coreyroth sugested and partialy solved the problem. I then got a error saying that there was no typescript.
Npm Install installed the v3 typescript but it didn't worked.
I solved by npm i @microsoft/rush-stack-compiler-3.0

The question is that all of this should be working from the start.

SPFx 1.8 installes office-ui-fabric-react 6 and typescript 2.7.2 that doesn't work with it.

But I then realized that this is the office-ui-fabric-react gitub and this is a spfx problem

[sudharsank]

Yeah. I had done what @coreyroth sugested and partialy solved the problem. I then got a error saying that there was no typescript.
Npm Install installed the v3 typescript but it didn't worked.
I solved by npm i @microsoft/rush-stack-compiler-3.0

The question is that all of this should be working from the start.

SPFx 1.8 installes office-ui-fabric-react 6 and typescript 2.7.2 that doesn't work with it.

But I then realized that this is the office-ui-fabric-react gitub and this is a spfx problem

Corey has mentioned the file name wrongly in his article. The file that has to be changed is the tsconfig.json, not the tslint.config file.

[coreyroth]

@sudharsank good catch on tsconfig.json. I've updated my post.

[lfastrup]

Moving to @microsoft/rush-stack-compiler-3.0 yielded a bunch of other strange errors for me. I'm using SPFX 1.8.0 and React 16. But the compiler version 2.9 worked fine for me:

1. npm i @microsoft/rush-stack-compiler-2.9
2. Update the extends line in tsconfig.json to "extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json"

[michaelmaillot]

Hi,

Thanks @coreyroth for this information. I couldn't make it work with the 3.0 version (I got a tslint error), but I made it work with the 3.2 version (also thx to @estruyf its blog post : eliostruyf.com/using-the-full-potential-of-react-in-sharepoint-framework-1-8-0/).

Anyway, I think that for the moment we should wait for a stabilized compatibility between SPFx 3.x TypeScript projects and 6.x Office Fabric React... 😅

Does anyone know on which version of Office UI Fabric React is based the 1.8 version of @microsoft/sp-office-fabric-core ?