0

So the only answers that even vaguely approach answering this seem to be on here. I'm pretty new to SPFX but am trying to build some book examples of React-Redux and I always come up against the same problems. First I download the samples, or implement the tutorials and they seem to work and serve fine until you get to add anything using office-ui-fabric-react controls. In this case:

<PrimaryButton
onClick={this.saveClick.bind(this)}
style={ { 'marginRight': '8px' } } >
Save
</PrimaryButton>

So this appears to be the version that ships with SPFX and I get onClick underlined and the error:

Property 'onClick' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes'

This is before I run gulp serve or try a build.

To get rid of this error I ended up reverting the version of office-ui-fabric-react to 4.14.1 and this now stops the error appearing in problems in VS Code - also had to revert the Typescript version to 2.2 from 3.x because it doesn't seem to play nice. But now when I try and run gulp serve I get about 50 errors that look like:

[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(18,59): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(18,61): error TS1005: '>' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(18,63): error TS1109: Expression expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(18,65): error TS1109: Expression expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(23,62): error TS1109: Expression expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(23,63): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(29,48): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(30,19): error TS1005: ':' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(31,20): error TS1005: ':' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(32,25): error TS1005: ':' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(33,22): error TS1005: ':' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(34,23): error TS1005: ':' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(44,4): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(48,4): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(52,4): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(56,4): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(56,30): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(60,50): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(67,36): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(74,42): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(84,4): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(91,4): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(97,4): error TS1005: ',' expected.
[10:33:52] Error - typescript - node_modules\@uifabric\utilities\lib\BaseComponent.d.ts(105,4): error TS1005: ',' expected.

I get a bunch of other build errors as well but these are consistently always there. Most answers seem to tell me to change my version of typescript (2.2.2) or office-ui-fabric-react (4.14.1) but I've tried multiple versions to no avail.

Does anyone know what's happening and how I even start to debug the problem?

Improve this question
1
  • Can you post the code of the whole class? or atleast how the binding has been done?
    – harshal gite
    Nov 15, 2018 at 12:50

2 Answers 2

Reset to default
2

There are a few things you should be aware of when developing SPFx solutions with react and office-ui-fabric-react.

After the initial project scaffolding, you shouldn't install a newer version of react or typescript (or update them). You shouldn't install office-ui-fabric-react as a separate dependency. Instead, you should use one, which is pre-installed with SPFx yeoman generator. The version of office-ui-fabric-react which comes with yeoman is 5.131.0. Check out this video, it's very helpful.

After scaffolding your project with SPFx yeoman react template, you should be able to use office-ui-fabric-react without issues, i.e.:

import {
  DetailsList,
  DetailsListLayoutMode,
  IColumn,
  IDetailsList
} from 'office-ui-fabric-react/lib/DetailsList';

Most likely you have issues with version conflicts. I recommend you to scaffold your project from scratch and starting adding new items gradually. If you have issues with vscode try to re-launch it.

Improve this answer
4
  • Hi - yes I'm coming to realise that, I'm usually a C# dev and the mindset is quite different. So I have scaffolded the projects and not changed the versions to my knowledge, but I'm not sure I have the right version of typescript or node or anything like that - and I can't really find a definitive guide. I'll have a look at the video though thanks.
    – stethelast
    Nov 15, 2018 at 13:32
  • BTW SPFx currently supports only node 8.x version. You don't have to change typescript version, just use the one installed with SPFx (2.4.2), don't install new version manually.
    – Sergei Sergeev
    Nov 15, 2018 at 13:41
  • Ah I see - so the first thing the book tells me to do is to install office-ui-fabric-react - but it looks like that has been added as a separate dependency on @microsoft/sp-office-ui-fabric-core - is that right - office-ui-fabric-react is not listed in package.json?
    – stethelast
    Nov 15, 2018 at 13:53
  • Yes, it's not listed. Of course you can install it separately, but in that case, they can't guarantee you full compatibility. Especially ui fabric react 6.x doesn't work with latest spfx.
    – Sergei Sergeev
    Nov 15, 2018 at 14:03
0

It may be due to the version conflicts. Try deleting/renaming the node_modules folder and again re-run the "npm install" command.

Improve this answer
1
  • Deleted node_modules and re-ran npm install and getting some slightly different errors but still all the same ones as above. I had also tried this previously.
    – stethelast
    Nov 15, 2018 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.