Fluentui: 6.8.2: node_modules\@uifabric\merge-styles\lib\IStyleSet.d.ts(11,43): error TS1005: ';' expected

[baywet]

Please provide a reproduction of the bug in a codepen:

• __Package version(s)__: 6.8.2
• __Browser and OS versions__: (fill this out if relevant)

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Blocking
Products/sites affected: SharePoint Framework webparts

Describe the issue:

Start a new SPFX 1.5.1 project.
Install office-ui-fabric-react@latest, it brings @uifabric/merge-styles@latest (6.8.2) which was published 3 hours ago.
When trying to build (keep in mind SPFX uses TS 2.4.2) I get the following error message:

Error - typescript - node_modules\office-ui-fabric-react\node_modules\@uifabric\merge-styles\lib\IStyleSet.d.ts(11,43): error TS1005: ';' expected.

If I force and downgrade the package to 6.8.0 it works properly.

Actual behavior:

Build fails with provided error message.

Expected behavior:

Build to succeed.

[redoz]

@baywet I'm pretty sure they took a dependency on TS 2.8 in #6061. But I'm not familiar with SPFX to know whether you can safely bump that to TS2.8+ or not.

[baywet]

@redoz thanks for the information. SPFX locks down everything today, which doesn't make thing easy in a lot of cases…
It's kind of a breaking change then but only in some context… One could argue for a major version bump but I can also understand why it wasn't done.
I'm not sure how to address that properly besides locking down versions in my project? But that means that anybody who hasn't locked versions, or starts a new project is going to run into that at the moment...

[gwendalbroudinpro]

On my side, I brutally downgraded office ui fabric to ^5. It's not the best but still a working temporary solution 🙊 .

[dzearing]

@iclanton FYI.

[cliffkoh]

Using Fabric 6 with SPFx is not recommended not just because of Typescript but also because SPFx is on React 15 (it will ALWAYS serve React 15) and Fabric 6 component code assumes you're on React 16. That is one of the big features of Fabric 6. Unfortunately until there is a new release of SPFx with more modern dependencies, it is recommended to stick to using Fabric 5.

(In particular with different React versions, the bugs that may occur in Fabric 6 components are likely to be very subtle and at runtime only!!)

[baywet]

@cliffkoh thanks, I didn't catch these details. Downgraded to v5 works again. I'll wait for SPFX 1.6 which hopefully should bring react 16 (and maybe a higher version of typescript?) which should become available anytime soon and report here once I upgrade :)
Question: should I leave this issue open or close it as it's not of this project's responsibility?

[cliffkoh]

Feel free to close if you feel your question has been addressed. :)

Also, please feel free to provide feedback to SPFx directly as well. Sometimes, things don't happen without people asking for it and although we try to pass on feedback, nothing beats hearing customer asks directly :)

[baywet]

Thanks! I'll see what 1.6 brings and complain if not happy :)

[coreyroth]

I just installed SPFx 1.6 and this is still an issue. I'm going to try and workaround it with 6.8.0.

[micahgodbolt]

Does 1.6 bring in React 16 and better TS support? Haven't dove in yet.

[coreyroth]

Unfortunately, it doesn't look like it. Which means Fabric React 6 is basically still unusable with SPFx.

"dependencies": { "@microsoft/sp-core-library": "1.6.0", "@microsoft/sp-lodash-subset": "1.6.0", "@microsoft/sp-office-ui-fabric-core": "1.6.0", "@microsoft/sp-webpart-base": "1.6.0", "@types/es6-promise": "0.0.33", "@types/react": "15.6.6", "@types/react-dom": "15.5.6", "@types/webpack-env": "1.13.1", "@uifabric/merge-styles": "^6.8.3", "react": "15.6.2", "react-dom": "15.6.2"

[micahgodbolt]

ah drat....seems i'm closing this back up. Keeping fingers crossed for 1.7.0

[bva999]

I have the same problem but my version of react is 16 …. I use SharePoint Framework 1.7.0

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"
  }
}

[coreyroth]

I just tried 6.101.0 and can confirm that this issue still persists. Hopefully, now that SPFx supports React 16, we might be able to get this working soon.

[baywet]

Repos owners don't allow issues authors to re-open their issues. I don't think we'll get any attention in a closed issue. Would any of you mind re-opening an issue and mentioning this thread + people on this thread on the new issue?

[coreyroth]

Looks like someone already has. #7054

[cliffkoh]

The problem is that SPFx needs to be on TypeScript 2.8 as well to use the more recent versions of Fabric 6. The feedback has been passed on to them and my impression is that they're taking it seriously. I know for a fact they're working on officially adopting Fabric 6 as well over the coming weeks.

W.r.t. closed threads, we do strongly recommend opening a new issue and linking to the existing issue, just because it is otherwise really hard to stay on top of comments in closed issues OR closed issues that are reopened.

Thank you so much for your understanding :)

[pratikgupta2]

Tried workaround to comment out source line which was causing error and compiled successfully

export declare type __MapToFunctionType = Extract extends never ? (...args: any[]) => Partial : Extract;

File Name : IStyleSet.d.ts

Path : node_moduels/@uifabric/merge-styles/lib/

[ColinGardner]

I did the same as pratikgupta2, just commented out the offending line and everything seems fine and dandy

[baywet]

@msft-github-bot this issue is solved

[cliffkoh]

@baywet sorry about this, there was a human error by a team-member that caused spurious bot behavior.