4

So Im building a spfx webpart of which one feature is to display link previews. I used this library for the task. I had to change the version of the package "styled-components" and update my "react"(16.4.18) and "react-dom"(16.0.9) in order for it to work. After making these changes and running gulp build I receive the follwing List of errors: 

[10:21:13] [tsc] typescript version: 2.4.2
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(27,38): error TS1005: '=' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(29,46): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(29,75): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(29,99): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,54): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,78): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,81): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,97): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,122): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,130): error TS1128: Declaration or statement expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,138): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,48): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,49): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,50): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,68): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,69): error TS1005: ')' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(46,30): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(46,54): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(46,57): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2297,27): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2298,14): error TS1005: ':' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2298,28): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2299,9): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2300,9): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2301,9): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2302,5): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2302,12): error TS1005: ')' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2314,49): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2314,76): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2314,99): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2315,13): error TS1128: Declaration or statement expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2316,13): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2316,17): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2316,44): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2316,45): error TS1005: ':' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2318,17): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2318,21): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2318,51): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2318,52): error TS1005: ':' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2320,21): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2320,24): error TS1005: ')' expected.
[10:21:17] Error - 'tsc' sub task errored after 3.75 s
 exited with code 2

this github issue is somehow similar to mine, suggesting that I update my typescript version to 2.3.4 or above.

There was another github issue which I cannot find at this time suggesting to update typescript version to 2.8.x or above.

My typescript version is 3.1.3. I have the same version installed locally (in the project's node modules folder) and globally. As you may have noticed, on build start I stell get the output

[tsc] typescript version: 2.4.2

I have changed all entries related to typescript in the "package.json" file as well as the yarn.lock file (I am using yarn) to either "3.1.3" or "~3.1.3" as they originally said "2.4.1" or "2.4.2" or "~2.4.1" or "~2.4.2". From what I've read it is something related to definition/delcaration syntax that is only supported in typescript 2.8 and above. For istance, one of the lines in question is: 

 Error - [tsc] node_modules/@types/prop-types/index.d.ts(27,38): error TS1005: '=' expected.

export const nominalTypeHack: unique symbol;

I am pretty new to typescript and node in general, so this may be another point contributing to not knowing how to fix this.

If theres more information to be provided, I will be happy to do so. Thanks in advance for all suggestions and answers.

Roman Stadlhuber
  • 88
  • 2
  • 7

1 Answers1

5

I did a quick web search and found several threads (e.g., 1, 2) indicating that the SPFx build system was pinning people to an old version of TypeScript. I didn't see a solution.

One conceivable approach would be to separate your code into one part that interacts with React and one part that interacts with SPFx, compile the first part to JavaScript yourself using a recent version of tsc, and include the resulting JavaScript files when compiling the second part via the SPFx build system. I don't know anything about the SPFx build system to know if this might work; if you try it and run into a specific problem, I may be able to help.

Another idea would be to use older versions of @types packages that are compatible with your TypeScript version, though they may be missing features you need. For example, for TypeScript 2.4.2, you would install the ts2.4 tag of @types/prop-types by running npm install @types/prop-types@ts2.4 (or npm install -D @types/prop-types@ts2.4; see here for details of the difference).

Matt McCutchen
  • 28,856
  • 2
  • 68
  • 75
  • After some fiddling with react and react-dom versions, resetting my local typescript version to the required 2.4.2 and fiddling some other dependencies, I got "gulp build" to work again. I am now facing the problem that upon loading my webpart in the local workbench I get the error that "https://localhost:4321/node_modules/react/dist/react.js" cannot be found. Indeed such a directory is not contained within the packages folder. But it isn't contained in the working webparts either. I don't get the point. Seems to be some problem with node/ webpack in specific? – Roman Stadlhuber Oct 23 '18 at 12:04
  • I realize this comment is old, but maybe it'll help someone else: Make sure you first navigate to the `/workbench` endpoint and it'll copy the required files and redirect you to the page you're on. I think you missed the step where it would copy your react.js to the rightp lace. – Nate Radebaugh Jan 18 '19 at 17:45