Sp-dev-docs: New version of Fabric React throws an error @IStyleSet.d.ts -> ';' expected

[muraray]

Category

• [ ] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Seems like after following the Online SharePoint Fabric React documentation the build breaks by throwing the following errors

Observed Behavior

C:\Codes\helloworld-webpart
λ gulp serve
Build target: DEBUG
[00:25:26] Using gulpfile C:\Codes\helloworld-webpart\gulpfile.js
[00:25:26] Starting gulp
[00:25:26] Starting 'serve'...
[00:25:26] Starting subtask 'configure-sp-build-rig'...
[00:25:26] Finished subtask 'configure-sp-build-rig' after 11 ms
[00:25:26] Starting subtask 'spfx-serve'...
[00:25:26] Starting server...
Starting api server on port 5432.
Registring api: /workbench
Registring api: /
[00:25:27] Finished subtask 'spfx-serve' after 617 ms
[00:25:27] Starting subtask 'pre-copy'...
[00:25:27] Finished subtask 'pre-copy' after 17 ms
[00:25:27] Starting subtask 'copy-static-assets'...
[00:25:27] Starting subtask 'sass'...
[00:25:28] Server started https://localhost:4321
[00:25:28] LiveReload started on port 35729
[00:25:28] Running server
[00:25:28] Opening https://localhost:5432/workbench using the default OS app
[00:25:29] Finished subtask 'copy-static-assets' after 1.89 s
[00:25:29] Finished subtask 'sass' after 1.88 s
[00:25:29] Starting subtask 'tslint'...
[00:25:29] [tslint] tslint version: 5.9.1
[00:25:29] Starting subtask 'tsc'...
[00:25:29] [tsc] typescript version: 2.4.2
Request: [::1] '/workbench'
Request: '/temp/workbench.html'
Request: '/temp/manifests.js'
Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/workbenchInit.js'
Request: '/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js'
Request: '/node_modules/@microsoft/decorators/dist/decorators.js'
Request: '/node_modules/@microsoft/sp-component-base/dist/sp-component-base_en-us.js'
Request: '/node_modules/@microsoft/sp-extension-base/dist/sp-extension-base_en-us.js'
Request: '/node_modules/@microsoft/sp-application-base/dist/sp-application-base_en-us.js'
Request: '/temp/workbench-packages/react/dist/react.js'
Request: '/temp/workbench-packages/react-dom/dist/react-dom.js'
Request: '/node_modules/@microsoft/office-ui-fabric-react-bundle/dist/office-ui-fabric-react-bundle.js'
Request: '/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js'
Request: '/node_modules/@microsoft/sp-webpart-workbench/dist/sp-webpart-workbench_en-us.js'
Request: '/node_modules/@microsoft/sp-webpart-workbench/dist/4.4_689fc83124c0ef2ca7f1.js'
Request: '/node_modules/@microsoft/sp-webpart-workbench/dist/3.3_0530262fccec360275ac.js'
Request: '/node_modules/@microsoft/sp-webpart-workbench/dist/1.toolbox_463091275c45fbffab50.js'
[00:25:32] Error - [tsc] node_modules/office-ui-fabric-react/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(11,47): error TS1005: ';' expected.
[00:25:32] Error - 'tsc' sub task errored after 3.31 s
exited with code 2
Request: '/lib/webparts/helloWorld/loc/en-us.js'
Request: '/dist/hello-world-web-part.js'
Request: '/node_modules/@microsoft/sp-component-base/dist/0.0_ec2b286fa5ff87c2df68.js'
[00:25:33] Finished subtask 'tslint' after 4.49 s
[00:28:57] Server stopped
About to exit with code: 0
Process terminated before summary could be written, possible error in async code not continuing!
Trying to exit with exit code 1
Terminate batch job (Y/N)? N

Steps to Reproduce

Installed the office-ui-fabric-react
npm --save install office-ui-fabric-react

Dependency details for your reference

"dependencies": {
    "@microsoft/sp-core-library": "1.6.0",
    "@microsoft/sp-lodash-subset": "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",
    "office-ui-fabric-react": "^6.67.3",
    "react": "15.6.2",
    "react-dom": "15.6.2"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.6.0",
    "@microsoft/sp-module-interfaces": "1.6.0",
    "@microsoft/sp-webpart-workbench": "1.6.0",
    "tslint-microsoft-contrib": "~5.0.0",
    "gulp": "~3.9.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2"
  }

Uninstalled the sp-office-ui-fabric-core
npm uninstall @microsoft/sp-office-ui-fabric-core --save

updated the following reference as suggested
@import '~office-ui-fabric-react/dist/sass/_References.scss';

amended my helloworld.tsx with following code snippet

import { Button } from 'office-ui-fabric-react/lib/Button';

render() {
 …
  <div>
    <Button>click me</Button>
  </div>
  ...
}

Thanks for your looking into this issue.

[MaheshakaMudli]

@muraray : This happens if you are using Office-ui-fabric-react version +6 and react version 15.
Office-ui-fabric-react expects react version +16 . Either downgrade your Office-ui-fabric-react to 15 version or upgrade your react version to +6.

[muraray]

Either downgrade your Office-ui-fabric-react to 15 version or upgrade your react version to +6.
I'm i reading it wrong?

"office-ui-fabric-react": "^6.67.3",
"react": "15.6.2",
"react-dom": "15.6.2"

Office-ui-fabric-react is only 6.67.3 are you requesting to downgrade this version to 5..? else how is it?

[MaheshakaMudli]

Yes downgrade Ur office-ui-fabric- react version to 15....

Regards
Mahesh

On Fri 14 Sep, 2018, 4:45 PM Murali Ramakrishnan, [e-mail]
wrote:

Either downgrade your Office-ui-fabric-react to 15 version or upgrade your
react version to +6.
I'm i reading it wrong?

"office-ui-fabric-react": "^6.67.3",
"react": "15.6.2",
"react-dom": "15.6.2"

Office-ui-fabric-react is only 6.67.3 are you requesting to downgrade this
version to 5..? else how is it?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/SharePoint/sp-dev-docs/issues/2541#issuecomment-421327494,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWml-r_elimDuwq8GNxobrctpupAh8F6ks5ua4_ngaJpZM4Wnxyd
.

[MaheshakaMudli]

Sorry downgrade to version 5.....

On Fri 14 Sep, 2018, 7:09 PM MAHESH MUDLI, [e-mail] wrote:

Yes downgrade Ur office-ui-fabric- react version to 15....

Regards
Mahesh

On Fri 14 Sep, 2018, 4:45 PM Murali Ramakrishnan, <
[email protected]> wrote:

Either downgrade your Office-ui-fabric-react to 15 version or upgrade
your react version to +6.
I'm i reading it wrong?

"office-ui-fabric-react": "^6.67.3",
"react": "15.6.2",
"react-dom": "15.6.2"

Office-ui-fabric-react is only 6.67.3 are you requesting to downgrade
this version to 5..? else how is it?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/SharePoint/sp-dev-docs/issues/2541#issuecomment-421327494,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWml-r_elimDuwq8GNxobrctpupAh8F6ks5ua4_ngaJpZM4Wnxyd
.

[muraray]

Thanks downgraded to the lts version of "office-ui-fabric-react": "5.124.0",
works like a charm

[bva999]

I have the same problem but my version of react is 16 ….

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

[georgenorberg]

Also have the same issue with React 16+ & ui fabric 6+
"@microsoft/decorators": "1.7.1",
"@microsoft/sp-core-library": "1.7.1",
"@microsoft/sp-listview-extensibility": "1.7.1",
"@types/es6-promise": "0.0.33",
"@types/react": "16.4.2",
"@types/react-dom": "16.0.5",
"@types/webpack-env": "1.13.1",
"office-ui-fabric-react": "^6.143.1",
"react": "16.3.2",
"react-dom": "16.3.2"

[InsaLili]

I had the same issue with React 16+ and fabric 6+.
After I changed the Typescript compiler in visual studio from 2.6 to 3.1 it worked.
So for anyone who still faces the same issue, it may help to upgrade the Typescript compiler in your IDE.

[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