Sp-dev-docs: 🐞SPFx v1.8.1 OOTB Web Part + Fabric React fails build without workaround

[andrewconnell]

Category

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

Expected or Desired Behavior

Creating an SPFx web part with the latest Yeoman SharePoint generator v1.8.1 that uses the version of Fabric React included in the default React project scaffolding should build.

Observed Behavior

After creating a project and adding a single reference to a Fabric React control, it errors when running gulp build on TypeScript type declarations defined by Fabric React:

$ gulp build
Build target: DEBUG
[15:02:07] Using gulpfile ~/_play/spfx181/gulpfile.js
[15:02:07] Starting gulp
[15:02:07] Starting 'build'...
[15:02:07] Starting subtask 'configure-sp-build-rig'...
[15:02:07] Finished subtask 'configure-sp-build-rig' after 4.63 ms
[15:02:07] Starting subtask 'pre-copy'...
[15:02:07] Finished subtask 'pre-copy' after 11 ms
[15:02:07] Starting subtask 'copy-static-assets'...
[15:02:07] Starting subtask 'sass'...
[15:02:07] Finished subtask 'copy-static-assets' after 27 ms
[15:02:07] Finished subtask 'sass' after 138 ms
[15:02:07] Starting subtask 'tslint'...
[15:02:08] [tslint] tslint version: 5.11.0
[15:02:08] Starting subtask 'tsc'...
[15:02:08] [tsc] typescript version: 2.7.2
[15:02:09] Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,67): error TS1005: ';' expected.
[15:02:09] Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,114): error TS1005: '(' expected.
[15:02:09] Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,136): error TS1005: '(' expected.
[15:02:09] Error - 'tsc' sub task errored after 1.61 s
 exited with code 2
[15:02:09] 'build' errored after 2.36 s
[15:02:09]
[15:02:09] Finished subtask 'tslint' after 2.38 s
[15:02:10] ==================[ Finished ]==================
Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,67): error TS1005: ';' expected.
Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,114): error TS1005: '(' expected.
Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,136): error TS1005: '(' expected.
Error - 'tsc' sub task errored after 1.61 s
 exited with code 2
[15:02:10] Project spfx-181 version:0.0.1
[15:02:10] Build tools version:3.9.7
[15:02:10] Node version:v8.14.1
[15:02:10] Total duration:5.5 s
[15:02:10] Task errors:4

Steps to Reproduce

1. create SPFx web part for SharePoint Online & select React as the target web framework

2. add an import reference to any of the Fabric React controls, such as:

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

3. execute gulp build from the command line

4. observe build errors

Workaround / Resolution

1. upgrade the project to use TypeScript v3.3:

   yarn remove @microsoft/rush-stack-compiler-2.7 -D
   yarn add @microsoft/[email protected] [email protected] -D -E
   

2. update extends property in tsconfig.json to the following value:

   "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
   

3. execute gulp build

   $ gulp build
   Build target: DEBUG
   [15:11:52] Using gulpfile ~/_play/spfx181/gulpfile.js
   [15:11:52] Starting gulp
   [15:11:52] Starting 'build'...
   [15:11:52] Starting subtask 'configure-sp-build-rig'...
   [15:11:52] Finished subtask 'configure-sp-build-rig' after 6.81 ms
   [15:11:52] Starting subtask 'pre-copy'...
   [15:11:52] Finished subtask 'pre-copy' after 13 ms
   [15:11:52] Starting subtask 'copy-static-assets'...
   [15:11:52] Starting subtask 'sass'...
   [15:11:52] Finished subtask 'copy-static-assets' after 38 ms
   [15:11:52] Finished subtask 'sass' after 161 ms
   [15:11:52] Starting subtask 'tslint'...
   [15:11:53] [tslint] tslint version: 5.12.1
   [15:11:53] Starting subtask 'tsc'...
   [15:11:53] [tsc] typescript version: 3.3.4000
   [15:11:56] Finished subtask 'tsc' after 2.55 s
   [15:11:56] Finished subtask 'tslint' after 3.86 s
   [15:11:56] Starting subtask 'post-copy'...
   [15:11:56] Finished subtask 'post-copy' after 119 μs
   [15:11:56] Finished 'build' after 4.06 s
   [15:11:57] ==================[ Finished ]==================
   [15:11:57] Project spfx-181 version:0.0.1
   [15:11:57] Build tools version:3.9.7
   [15:11:57] Node version:v8.14.1
   [15:11:57] Total duration:7.57 s
   

[msft-github-bot]

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

[patmill]

What version of fabric react are you using? I know we owe the document saying "this version of OUIFR requires this version of rush-stack". That is coming soon. That said, if you are using OUIFR 6.x, you need to have at least TS 2.9. Also, if you aren't explicitly adding OUIFR to your package.json file, your world will be nothing but trouble, as you will get whatever version of fabric react that happens to be bouncing around your node_modules folder because of a dependency to a different package.

[andrewconnell]

Using exactly what the SPFx v1.8.1 generator uses when selecting SPO & React:

• React v16.7
• OUIF (_not explicit, but in the dependency hierarchy for a default project_): 6.143.0

package.json

  "dependencies": {
    "@microsoft/sp-core-library": "1.8.1",
    "@microsoft/sp-lodash-subset": "1.8.1",
    "@microsoft/sp-office-ui-fabric-core": "1.8.1",
    "@microsoft/sp-property-pane": "1.8.1",
    "@microsoft/sp-webpart-base": "1.8.1",
    "@types/es6-promise": "0.0.33",
    "@types/react": "16.4.2",
    "@types/react-dom": "16.0.5",
    "@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-3.3": "0.1.6",
    "@microsoft/sp-build-web": "1.8.1",
    "@microsoft/sp-module-interfaces": "1.8.1",
    "@microsoft/sp-tslint-rules": "1.8.1",
    "@microsoft/sp-webpart-workbench": "1.8.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1",
    "typescript": "3.3.4000"
  }

[patmill]

Don't do this - "OUIF (not explicit, but in the dependency hierarchy for a default project): 6.143.0". If you are using OUIFR, explicitly declare the version you want to use.

Separate issue on "why are there dependencies on OUIFR". But even then, the solution would be to remove them, and your code would still break, just for a different reason (can't find ouifr). Unfortunately, the local workbench uses fabric react, and that is making it hard to remove the final dependency when I try and do this.

[patmill]

By the way - definitely our fault for having a bug in the documentation / lab on using fabric react. It came to light when we first rolled 1.8.1 (which was the first version that had a reference to OUIFR6) and the lab was updated to explicitly add OUIFR 5. I expect there were other issues that people might have hit had they followed this, where bumping their version of SPFx would have strange consequences because they started getting a different version of OUIFR w/o realizing it, but as long as there was no compile break, probably didn't notice.

[andrewconnell]

Interesting... when people saw in v1.8.0 that OUIFR was updated to v6x, that telegraphed "v6 is supported in SPO". Maybe not the intention, but that's how the community took it... granted, maybe this was incorrectly assumed.

I guess I'm a little unclear on where that leaves things. Not sure what, but something is creating the dependency in a default project on OUIFR v6 which causes a React project to break if it uses a component from Fabric React.

Would it then be correct to say that officially, If you want to use OUIFR, you need to add it as a reference; the fact it's in the dependency hierarchy in an SPFx+React project is just a coincidence that you should not rely on. This issue documented above in my OP is just one byproduct of this.

?

[patmill]

OUIFR 6 is totally supported in SPO. So is OUIFR 5. You just need to be clear in your project what version you want to use, because otherwise tsc will just find one and use it (and if you use OUIFR6, you need to use rish-stack-compiler-2.9 or later). If you happened to have included pnp that used OUIFR 5, I'll be honest - I don't know what version of OUIFR you would wind up with.

Your bold statement is completely correct, and applies to virtually everything (IMHO) that you reference. For example, you use package A, which has a ~dependency on B, which has a dependency on C. You start using C, but don't explicitly call it out in your package.json file. Package B gets patched, and no longer has a dependency on C. At this point, if you pull your project and run npm install (or yarn, or pnpm), your project will no longer build, because A brings in patched B, which no longer brings in C.

[andrewconnell]

Makes sense... thanks @patmill.

Last question, would this then be considered "by design" or "bug" being that an OOTB project breaks on build without some workaround?

[patmill]

I would say "It's by design that you need to explicitly reference any package you take an explicit dependency on in your package.json file".

The OOTB project doesn't break - it only breaks when you start referencing shadow dependencies that have unmet dependencies. In this case, you are referencing a shadow dependency on fabric 6 which has it's own requirement to use TS 2.9 or later. You need to add a reference to 5.x (which is what the tutorial does now), or add a reference to 6.x and bump your compiler to 2.9 or later.

If I were in charge of the world (or at least the compiler, bundler, etc.), I would have an error (or at least a warning) when you are importing from a package that isn't in your package.json file. (Un)fortunately I'm not in charge.

[andrewconnell]

Fair enough...

(Un)fortunately I'm not in charge.

I'll look into submitting a PR ;)

[patmill]

One thing I think that does make sense is that the react scaffolding should include fabric react by default, and have a FR control on the webpart. That makes total sense.

[pradiptanayak2007]

Category

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

Expected or Desired Behavior

Creating an SPFx web part with the latest Yeoman SharePoint generator v1.8.1 that uses the version of Fabric React included in the default React project scaffolding should build.

Observed Behavior

After creating a project and adding a single reference to a Fabric React control, it errors when running gulp build on TypeScript type declarations defined by Fabric React:

$ gulp build
Build target: DEBUG
[15:02:07] Using gulpfile ~/_play/spfx181/gulpfile.js
[15:02:07] Starting gulp
[15:02:07] Starting 'build'...
[15:02:07] Starting subtask 'configure-sp-build-rig'...
[15:02:07] Finished subtask 'configure-sp-build-rig' after 4.63 ms
[15:02:07] Starting subtask 'pre-copy'...
[15:02:07] Finished subtask 'pre-copy' after 11 ms
[15:02:07] Starting subtask 'copy-static-assets'...
[15:02:07] Starting subtask 'sass'...
[15:02:07] Finished subtask 'copy-static-assets' after 27 ms
[15:02:07] Finished subtask 'sass' after 138 ms
[15:02:07] Starting subtask 'tslint'...
[15:02:08] [tslint] tslint version: 5.11.0
[15:02:08] Starting subtask 'tsc'...
[15:02:08] [tsc] typescript version: 2.7.2
[15:02:09] Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,67): error TS1005: ';' expected.
[15:02:09] Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,114): error TS1005: '(' expected.
[15:02:09] Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,136): error TS1005: '(' expected.
[15:02:09] Error - 'tsc' sub task errored after 1.61 s
 exited with code 2
[15:02:09] 'build' errored after 2.36 s
[15:02:09]
[15:02:09] Finished subtask 'tslint' after 2.38 s
[15:02:10] ==================[ Finished ]==================
Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,67): error TS1005: ';' expected.
Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,114): error TS1005: '(' expected.
Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(18,136): error TS1005: '(' expected.
Error - 'tsc' sub task errored after 1.61 s
 exited with code 2
[15:02:10] Project spfx-181 version:0.0.1
[15:02:10] Build tools version:3.9.7
[15:02:10] Node version:v8.14.1
[15:02:10] Total duration:5.5 s
[15:02:10] Task errors:4

Steps to Reproduce

1. create SPFx web part for SharePoint Online & select React as the target web framework
2. add an import reference to any of the Fabric React controls, such as:
   ts import { Link } from 'office-ui-fabric-react/lib/components/Link';
3. execute gulp build from the command line
4. observe build errors

Workaround / Resolution

1. upgrade the project to use TypeScript v3.3:
   shell yarn remove @microsoft/rush-stack-compiler-2.7 -D yarn add @microsoft/[email protected] [email protected] -D -E
2. update extends property in tsconfig.json to the following value:
   json "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
3. execute gulp build
$ gulp build Build target: DEBUG [15:11:52] Using gulpfile ~/_play/spfx181/gulpfile.js [15:11:52] Starting gulp [15:11:52] Starting 'build'... [15:11:52] Starting subtask 'configure-sp-build-rig'... [15:11:52] Finished subtask 'configure-sp-build-rig' after 6.81 ms [15:11:52] Starting subtask 'pre-copy'... [15:11:52] Finished subtask 'pre-copy' after 13 ms [15:11:52] Starting subtask 'copy-static-assets'... [15:11:52] Starting subtask 'sass'... [15:11:52] Finished subtask 'copy-static-assets' after 38 ms [15:11:52] Finished subtask 'sass' after 161 ms [15:11:52] Starting subtask 'tslint'... [15:11:53] [tslint] tslint version: 5.12.1 [15:11:53] Starting subtask 'tsc'... [15:11:53] [tsc] typescript version: 3.3.4000 [15:11:56] Finished subtask 'tsc' after 2.55 s [15:11:56] Finished subtask 'tslint' after 3.86 s [15:11:56] Starting subtask 'post-copy'... [15:11:56] Finished subtask 'post-copy' after 119 μs [15:11:56] Finished 'build' after 4.06 s [15:11:57] ==================[ Finished ]================== [15:11:57] Project spfx-181 version:0.0.1 [15:11:57] Build tools version:3.9.7 [15:11:57] Node version:v8.14.1 [15:11:57] Total duration:7.57 s

Its really help me...thanks a lot

[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