New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tsc errors with SPFx 1.7 unchanged scaffolded project #2934

Open
sbrown-fc opened this Issue Nov 12, 2018 · 6 comments

Comments

Projects
None yet
5 participants
@sbrown-fc
Copy link

sbrown-fc commented Nov 12, 2018

Category

  • Question
  • Typo
  • Bug
  • Additional article idea

Expected or Desired Behavior

Workbench page launches with ability to add web part.

Observed Behavior

Workbench page is blank. Console shows error messages:

Build target: DEBUG
[12:40:38] Using gulpfile ~\Documents\SharePoint\playground\spfx17\gulpfile.js
[12:40:38] Starting gulp
[12:40:38] Starting 'serve'...
[12:40:38] Starting subtask 'configure-sp-build-rig'...
[12:40:38] Finished subtask 'configure-sp-build-rig' after 7.67 ms
[12:40:38] Starting subtask 'spfx-serve'...
[12:40:39] Starting server...
Starting api server on port 5432.
Registring api: /workbench
Registring api: */*
[12:40:39] Finished subtask 'spfx-serve' after 692 ms
[12:40:39] Starting subtask 'pre-copy'...
[12:40:39] Finished subtask 'pre-copy' after 25 ms
[12:40:39] Starting subtask 'copy-static-assets'...
[12:40:39] Starting subtask 'sass'...
[12:40:39] Server started https://localhost:4321
[12:40:39] LiveReload started on port 35729
[12:40:39] Running server
[12:40:39] Opening https://localhost:5432/workbench using the default OS app
[12:40:39] Finished subtask 'copy-static-assets' after 81 ms
[12:40:39] Finished subtask 'sass' after 326 ms
[12:40:39] Starting subtask 'tslint'...
[12:40:39] [tslint] tslint version: 5.9.1
[12:40:40] Starting subtask 'tsc'...
[12:40:40] [tsc] typescript version: 2.4.2
  Request: [::1] '/workbench'
  Request: '/temp/workbench.html'
  Request: '/temp/manifests.js'
  Request: '/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js'
  Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/workbenchInit.js'
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(27,38): error TS1005: '=' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(29,46): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(29,75): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(29,99): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,54): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,78): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,81): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,97): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,122): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,130): error TS1128: Declaration or statement expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,138): error TS1005: ',' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,48): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,49): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,50): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,68): error TS1005: '(' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,69): error TS1005: ')' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(46,30): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(46,54): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/prop-types/index.d.ts(46,57): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(672,11): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(672,39): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(672,42): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(674,11): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(674,40): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(675,13): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(676,13): error TS1005: '(' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(676,17): error TS1005: ',' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(676,35): error TS1005: ',' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(677,17): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(678,21): error TS1005: ')' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2597,27): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2598,14): error TS1005: ':' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2598,28): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2599,9): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2600,9): error TS1005: '(' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2601,9): error TS1005: '(' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2602,5): error TS1005: '(' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2602,12): error TS1005: ')' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2604,39): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2604,66): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2604,89): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2605,5): error TS1128: Declaration or statement
expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2606,5): error TS1005: '(' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2606,9): error TS1005: ',' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2606,36): error TS1005: ',' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2606,37): error TS1005: ':' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2608,9): error TS1005: '(' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2608,13): error TS1005: ',' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2608,43): error TS1005: ',' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2608,44): error TS1005: ':' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2610,13): error TS1005: '(' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2610,16): error TS1005: ')' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2624,49): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2624,89): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2624,92): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2624,126): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2625,13): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2625,17): error TS1005: ':' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2625,57): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2625,60): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2625,94): error TS1005: ';' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2626,17): error TS1109: Expression expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2627,17): error TS1005: '(' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2628,13): error TS1005: '(' expected.
[12:40:43] Error - [tsc] node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2628,43): error TS1005: '(' expected.
[12:40:43] Error - 'tsc' sub task errored after 3.52 s
 exited with code 2
[12:40:44] Finished subtask 'tslint' after 4.21 s

Steps to Reproduce

mkdir spfx17
cd spfx17
yo @microsoft/sharepoint --package-manager yarn

Accept all the defaults from yo but include React as a library.

gulp trust-dev-cert
gulp serve

EDIT: Seems to work when using pnpm as package manager.

@Seiyasu

This comment has been minimized.

Copy link
Contributor

Seiyasu commented Nov 14, 2018

Both yarn and pnpm for SPFx 1.7 have issues on my side, but not the same to you.

@VesaJuvonen

This comment has been minimized.

Copy link
Contributor

VesaJuvonen commented Nov 15, 2018

Most likely this is related on an inconsistent node and/or npm version. We currently support only node v8 LTS version and not yet v10 with SPFx. Can you share the versions which you are using, so that we can build a consistent repro. Thanks.

@sbrown-fc

This comment has been minimized.

Copy link

sbrown-fc commented Nov 15, 2018

Version details:

Node: 8.12.0
NPM: 6.4.1
Yarn: 1.12.3
PNPM: 2.18.2

I can get it working using NPM (in other words, with no --package-manager switch), using PNPM there is a tslint error (Could not find custom rule directory: tslint-microsoft-contrib) but otherwise it works. Yarn gives the errors in my original post and the workbench doesn't load.

My usual dev box is Windows but I've also tried NPM and Yarn on Linux and the same results happen there too.

@patmill

This comment has been minimized.

Copy link
Contributor

patmill commented Nov 15, 2018

It's an issue specifically with Yarn (not necessarily in Yarn, just with using Yarn and SPFx). We are sorting out the pnpm issue first, which appears to be an underlying issue with tslint ( pnpm/pnpm#1487 ). We'll look at Yarn next to see what's going on.

@nickpape-msft

This comment has been minimized.

Copy link
Contributor

nickpape-msft commented Nov 15, 2018

FYI, for the PNPM issue, I filed a workaround here: #2916

And opened an issue with tslint: palantir/tslint#4294

Investigating the yarn issue now.

@nickpape-msft

This comment has been minimized.

Copy link
Contributor

nickpape-msft commented Nov 16, 2018

For this yarn issue, the best way to work around it is to add a resolution to your package.json:

"resolutions": {
  "@types/react": "16.4.2"
}

This seems to be a bug with Yarn. It is not deduping the dependencies in the same way as NPM or PNPM would.

I filed an issue there: yarnpkg/yarn#6695

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment