Error when use with SharePoint Framework 1.7.0 #7054

bva999 · 2018-11-09T14:04:44Z

Package version(s): 6.101.0
Browser and OS versions: --

Please provide a reproduction of the bug in a codepen:

Upgrade SFPX solution to version 1.7.0
Remove old office-ui-fabric-react (npm uninstall office-ui-fabric-react, npm uninstall @uifabirc/icons)
Install office-ui-fabric-react@lates
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.

The text was updated successfully, but these errors were encountered:

kenotron · 2018-11-09T14:52:19Z

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 · 2018-11-09T16:12:14Z

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

micahgodbolt · 2018-11-09T17:50:06Z

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

coreyroth · 2018-11-09T18:38:14Z

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

micahgodbolt · 2018-11-09T18:40:23Z

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 · 2018-11-09T18:49:47Z

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

micahgodbolt · 2018-11-09T18:56:46Z

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

cliffkoh · 2018-11-09T21:23:00Z

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 · 2018-11-14T00:47:19Z

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 · 2019-01-04T15:11:49Z

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 · 2019-01-10T07:09:50Z

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 · 2019-01-10T08:15:23Z

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 · 2019-03-25T15:31:01Z

any solution? I meet this bug now.

coreyroth · 2019-03-25T15:33:17Z

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

Using Fabric React 6 with SPFx 1.8

Dangerous-Mind · 2019-03-29T18:09:37Z

@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 · 2019-03-29T18:27:22Z

@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 · 2019-03-29T18:56:46Z

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

Dangerous-Mind · 2019-03-30T12:05:25Z

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 · 2019-04-02T07:01:32Z

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 · 2019-04-02T14:14:39Z

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

lfastrup · 2019-04-10T09:45:03Z

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:

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

michaelmaillot · 2019-04-10T13:46:54Z

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 ?

msft-github-bot assigned kenotron Nov 9, 2018

msft-github-bot added the Needs: Triage 🔍 label Nov 9, 2018

kenotron added Needs: Author Feedback Fabric 5 and removed Needs: Triage 🔍 labels Nov 9, 2018

kenotron assigned kenotron and unassigned kenotron Nov 9, 2018

coreyroth mentioned this issue Nov 9, 2018

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

Closed

cliffkoh removed Fabric 5 Needs: Author Feedback labels Nov 9, 2018

cliffkoh added the Needs: Author Feedback label Nov 9, 2018

pkbullock mentioned this issue Nov 12, 2018

Struggling with React 16/Office UI Fabric React in SPFX SharePoint/sp-dev-docs#2936

Closed

4 tasks

msft-github-bot added the Status: No Recent Activity label Nov 14, 2018

bva999 closed this as completed Nov 14, 2018

msft-github-bot removed the Status: No Recent Activity label Jan 4, 2019

cliffkoh mentioned this issue Feb 20, 2019

Build error with SPFX @uifabric : error TS1005 #8051

Closed

KevinTCoughlin mentioned this issue May 3, 2019

Add build definition to test TypeScript compatibility of office-ui-fabric-react #8961

Merged

microsoft locked as resolved and limited conversation to collaborators Aug 30, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error when use with SharePoint Framework 1.7.0 #7054

Error when use with SharePoint Framework 1.7.0 #7054

bva999 commented Nov 9, 2018 •

edited

Loading

kenotron commented Nov 9, 2018

kenotron commented Nov 9, 2018

micahgodbolt commented Nov 9, 2018

coreyroth commented Nov 9, 2018

micahgodbolt commented Nov 9, 2018

coreyroth commented Nov 9, 2018 •

edited

Loading

micahgodbolt commented Nov 9, 2018

cliffkoh commented Nov 9, 2018 •

edited

Loading

msft-github-bot commented Nov 14, 2018

kurtnelle commented Jan 4, 2019

michaelmaillot commented Jan 10, 2019

cliffkoh commented Jan 10, 2019

peterremote1980 commented Mar 25, 2019

coreyroth commented Mar 25, 2019

Dangerous-Mind commented Mar 29, 2019

baywet commented Mar 29, 2019

patmill commented Mar 29, 2019

Dangerous-Mind commented Mar 30, 2019

sudharsank commented Apr 2, 2019

coreyroth commented Apr 2, 2019

lfastrup commented Apr 10, 2019

michaelmaillot commented Apr 10, 2019

Error when use with SharePoint Framework 1.7.0 #7054

Error when use with SharePoint Framework 1.7.0 #7054

Comments

bva999 commented Nov 9, 2018 • edited Loading

Please provide a reproduction of the bug in a codepen:

Actual behavior:

Expected behavior:

kenotron commented Nov 9, 2018

kenotron commented Nov 9, 2018

micahgodbolt commented Nov 9, 2018

coreyroth commented Nov 9, 2018

micahgodbolt commented Nov 9, 2018

coreyroth commented Nov 9, 2018 • edited Loading

micahgodbolt commented Nov 9, 2018

cliffkoh commented Nov 9, 2018 • edited Loading

msft-github-bot commented Nov 14, 2018

kurtnelle commented Jan 4, 2019

michaelmaillot commented Jan 10, 2019

cliffkoh commented Jan 10, 2019

peterremote1980 commented Mar 25, 2019

coreyroth commented Mar 25, 2019

Dangerous-Mind commented Mar 29, 2019

baywet commented Mar 29, 2019

patmill commented Mar 29, 2019

Dangerous-Mind commented Mar 30, 2019

sudharsank commented Apr 2, 2019

coreyroth commented Apr 2, 2019

lfastrup commented Apr 10, 2019

michaelmaillot commented Apr 10, 2019

bva999 commented Nov 9, 2018 •

edited

Loading

coreyroth commented Nov 9, 2018 •

edited

Loading

cliffkoh commented Nov 9, 2018 •

edited

Loading