Tuesday, 21 January 2020

npm and gulp commands in spfx

SPFX(gulp) and NPM basic commands 

yo @microsoft/sharepoint

gulp build

gulp serve


gulp serve --nobrowser


gulp bundle


gulp bundle --ship


gulp package-solution


gulp package-solution --ship

gulp clean

To check the list of globally installed compiler in npm

npm ls -g --depth=0

Result:

E:\SharePointFrameWorkDEV\ReactSPFXSolution>npm ls -g --depth=0
C:\Users\m.muqtdeer\AppData\Roaming\npm
+-- @angular/cli@8.3.22
+-- @microsoft/generator-sharepoint@1.10.0
+-- gulp@4.0.2
+-- npm@6.13.6
+-- typescript@3.7.5
`-- yo@3.1.1



To check the version of  current package and new version  when upgrading the current solution 

npm outdated

Result:

E:\SharePointFrameWorkDEV\ReactSPFXSolution>npm outdated
Package                             Current   Wanted   Latest  Location
@microsoft/rush-stack-compiler-2.9   0.7.16   0.7.16   0.10.1  student-details
@microsoft/rush-stack-compiler-3.3    0.3.5    0.3.5    0.5.1  student-details
@pnp/common                           1.3.9    1.3.9    2.0.0  student-details
@pnp/graph                            1.3.9    1.3.9    2.0.0  student-details
@pnp/logging                          1.3.9    1.3.9    2.0.0  student-details
@pnp/odata                            1.3.9    1.3.9    2.0.0  student-details
@pnp/sp                               1.3.9    1.3.9    2.0.0  student-details
@types/chai                          3.4.34   3.4.34    4.2.7  student-details
@types/es6-promise                   0.0.33   0.0.33    3.3.0  student-details
@types/mocha                         2.2.38   2.2.38    5.2.7  student-details
@types/react                         16.8.8   16.8.8  16.9.18  student-details
@types/react-dom                     16.8.3   16.8.3   16.9.5  student-details
@types/webpack-env                   1.13.1   1.13.1   1.15.0  student-details
ajv                                   5.2.5    5.2.5   6.11.0  student-details
gulp                                  3.9.1    3.9.1    4.0.2  student-details
office-ui-fabric-react              6.189.2  6.189.2   7.83.2  student-details
react                                16.8.5   16.8.5  16.12.0  student-details
react-dom                            16.8.5   16.8.5  16.12.0  student-details
styled-components                     4.4.1    4.4.1    5.0.0  student-details

To check globally installed  package

npm outdated -g

E:\SharePointFrameWorkDEV\ReactSPFXSolution>npm outdated -g
Package       Current  Wanted  Latest  Location
@angular/cli   8.3.22  8.3.23  8.3.23  global

typescript compatibility issue in spfx

Error :  typescript compatibility issue in spfx

Below is error  when runing  gulp build command after creating a new project or upgrading project.


E:\SharePointFrameWorkDEV\ReactSPFXSolution>gulp build
Build target: DEBUG
[12:22:17] Using gulpfile E:\SharePointFrameWorkDEV\ReactSPFXSolution\gulpfile.js
[12:22:17] Starting gulp
[12:22:17] Starting 'build'...
[12:22:17] Starting subtask 'configure-sp-build-rig'...
[12:22:17] Finished subtask 'configure-sp-build-rig' after 13 ms
[12:22:17] Starting subtask 'pre-copy'...
[12:22:17] Finished subtask 'pre-copy' after 56 ms
[12:22:17] Starting subtask 'copy-static-assets'...
[12:22:17] Starting subtask 'sass'...
[12:22:17] Finished subtask 'copy-static-assets' after 93 ms
[12:22:18] Finished subtask 'sass' after 615 ms
[12:22:18] Starting subtask 'tslint'...
[12:22:20] [tslint] tslint version: 5.12.1
[12:22:20] Starting subtask 'tsc'...

[12:22:20] [tsc] typescript version: 2.7.2

[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(34,39): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,47): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,48): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,49): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,76): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,100): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,103): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,119): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,144): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,152): error TS1128: Declaration or statement expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,160): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(38,50): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(38,51): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(38,52): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(38,69): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(38,71): error TS1128: Declaration or statement expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(53,30): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(53,54): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/prop-types/index.d.ts(53,57): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(56,51): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(57,17): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(58,25): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(107,21): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(107,29): error TS1131: Property or signature expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(107,35): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(107,41): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(107,55): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(107,63): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(107,67): error TS1128: Declaration or statement expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(108,5): error TS1128: Declaration or statement expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(316,50): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(316,72): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(316,75): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(715,15): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(715,29): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(717,13): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(717,16): error TS1005: ')' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(721,15): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(721,29): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(722,17): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(722,31): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(722,39): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(723,17): error TS1128: Declaration or statement expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(723,26): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(724,42): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(724,71): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(725,21): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(726,17): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(727,13): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(727,16): error TS1005: ')' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(736,11): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(736,47): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(737,13): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(738,17): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(738,31): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(742,11): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(742,40): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(743,13): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(743,34): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(744,13): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(744,46): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(786,56): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(786,78): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(786,86): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(787,57): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(787,84): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(787,87): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2653,31): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2655,13): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2655,25): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2657,13): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2658,5): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2658,6): error TS1005: ')' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2687,33): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2687,41): error TS1131: Property or signature expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2688,28): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2688,38): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2689,5): error TS1128: Declaration or statement expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2728,1): error TS1128: Declaration or statement expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2732,32): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2732,43): error TS1005: ')' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2732,71): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2732,73): error TS1128: Declaration or statement expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2732,80): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2737,45): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2738,17): error TS1005: ']' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2738,18): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2738,19): error TS1136: Property assignment expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2738,35): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2738,38): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2738,40): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2738,48): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2739,13): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2739,21): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2739,27): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2740,11): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2741,9): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2741,12): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2742,9): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2742,12): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2743,39): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2743,40): error TS1005: ')' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2749,27): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2750,14): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2750,28): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2751,9): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2752,9): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2753,9): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2754,5): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2754,12): error TS1005: ')' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2756,39): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2756,66): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2756,89): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2757,5): error TS1128: Declaration or statement expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2758,5): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2758,9): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2758,36): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2758,37): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2760,9): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2760,13): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2760,43): error TS1005: ',' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2760,44): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2762,13): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2762,16): error TS1005: ')' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2776,49): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2776,89): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2776,92): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2776,126): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2777,13): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2777,17): error TS1005: ':' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2777,57): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2777,60): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2777,94): error TS1005: ';' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2778,17): error TS1109: Expression expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2779,17): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2780,13): error TS1005: '(' expected.
[12:22:25] Error - [tsc] node_modules/@types/react/index.d.ts(2780,43): error TS1005: '(' expected.
[12:22:25] Error - 'tsc' sub task errored after 5.38 s
 exited with code 2
[12:22:25] 'build' errored after 7.85 s
[12:22:25]
[12:22:25] ==================[ Finished ]==================
Error - [tsc] node_modules/@types/prop-types/index.d.ts(34,39): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,47): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,48): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,49): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,76): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,100): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,103): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,119): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,144): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,152): error TS1128: Declaration or statement expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(36,160): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(38,50): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(38,51): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(38,52): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(38,69): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(38,71): error TS1128: Declaration or statement expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(53,30): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(53,54): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/prop-types/index.d.ts(53,57): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(56,51): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(57,17): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(58,25): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(107,21): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(107,29): error TS1131: Property or signature expected.
Error - [tsc] node_modules/@types/react/index.d.ts(107,35): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(107,41): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(107,55): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(107,63): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(107,67): error TS1128: Declaration or statement expected.
Error - [tsc] node_modules/@types/react/index.d.ts(108,5): error TS1128: Declaration or statement expected.
Error - [tsc] node_modules/@types/react/index.d.ts(316,50): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(316,72): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(316,75): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(715,15): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(715,29): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(717,13): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(717,16): error TS1005: ')' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(721,15): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(721,29): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(722,17): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(722,31): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(722,39): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(723,17): error TS1128: Declaration or statement expected.
Error - [tsc] node_modules/@types/react/index.d.ts(723,26): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(724,42): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(724,71): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(725,21): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(726,17): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(727,13): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(727,16): error TS1005: ')' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(736,11): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(736,47): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(737,13): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(738,17): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(738,31): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(742,11): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(742,40): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(743,13): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(743,34): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(744,13): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(744,46): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(786,56): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(786,78): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(786,86): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(787,57): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(787,84): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(787,87): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2653,31): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2655,13): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2655,25): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2657,13): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2658,5): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2658,6): error TS1005: ')' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2687,33): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2687,41): error TS1131: Property or signature expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2688,28): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2688,38): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2689,5): error TS1128: Declaration or statement expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2728,1): error TS1128: Declaration or statement expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2732,32): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2732,43): error TS1005: ')' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2732,71): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2732,73): error TS1128: Declaration or statement expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2732,80): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2737,45): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2738,17): error TS1005: ']' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2738,18): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2738,19): error TS1136: Property assignment expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2738,35): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2738,38): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2738,40): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2738,48): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2739,13): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2739,21): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2739,27): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2740,11): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2741,9): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2741,12): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2742,9): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2742,12): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2743,39): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2743,40): error TS1005: ')' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2749,27): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2750,14): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2750,28): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2751,9): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2752,9): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2753,9): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2754,5): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2754,12): error TS1005: ')' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2756,39): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2756,66): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2756,89): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2757,5): error TS1128: Declaration or statement expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2758,5): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2758,9): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2758,36): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2758,37): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2760,9): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2760,13): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2760,43): error TS1005: ',' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2760,44): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2762,13): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2762,16): error TS1005: ')' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2776,49): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2776,89): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2776,92): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2776,126): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2777,13): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2777,17): error TS1005: ':' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2777,57): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2777,60): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2777,94): error TS1005: ';' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2778,17): error TS1109: Expression expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2779,17): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2780,13): error TS1005: '(' expected.
Error - [tsc] node_modules/@types/react/index.d.ts(2780,43): error TS1005: '(' expected.
Error - 'tsc' sub task errored after 5.38 s
 exited with code 2
[12:22:26] Project student-details version:0.0.1
[12:22:26] Build tools version:3.12.1
[12:22:26] Node version:v10.14.2
[12:22:26] Total duration:15 s
[12:22:26] Task errors:138


Solution : 

1. First step to upgrade the rush stack compiler run "npm install @microsoft/rush-stack-compiler-3.2" command.
2.  open the "tsconfig.json"  and update the extend  property with the new rush stack compiler


Before 

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


After update

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

3. Close the file and run gulp build command 

this is the way to upgrade or downgrade the rush stack compiler in spfx

@hope problem will be resolved





Thursday, 9 January 2020

read row data in html table using jQuery


155552345
row2234888
123499
1234666
123477









<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

   $('#dtTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
    var row = ReadRowData(tr);
        alert(row);     
    });
});
function ReadRowData(tr)
{
    var rowData=[];   
    $('td', tr).each(function () 
{  
rowData.push($(this).html());
});  
    return rowData;
}

</script>


<table id="dtTable" border="1" width="100%">
<tbody>
<tr><td class="details-control"><span>1</span><span>5555</span></td><td>2</td><td>3</td><td>4</td><td>5</td</tr>
<tr><td class="details-control">row2</td><td>2</td><td>3</td><td>4</td><td>888</td</tr>
<tr><td class="details-control">1</td><td>2</td><td>3</td><td>4</td><td>99</td</tr>
<tr><td class="details-control">1</td><td>2</td><td>3</td><td>4</td><td>666</td</tr>
<tr><td class="details-control">1</td><td>2</td><td>3</td><td>4</td><td>77</td</tr>
</tbody>
</table>

Sunday, 5 January 2020

google chart in spfx

To Show google chart in SPFX below are steps to follow

1. open the config.json file and add below enetry in external section

"externals": {
  "google": {
"path": "https://www.gstatic.com/charts/loader.js",
"globalName": "google"
  }
}
2. add below div tag in your html
<div id="pie-chart"></div>
3. create a google.d.ts file under the webpart folder inside src folder.
4. add below code in google.d.ts as a module

declare module "google" {
  interface IGoogle {
  charts: any;
  visualization: any;
  }
  var google: IGoogle;
  export = google;
}

5. now import the google module in webpart where you want to add graph

    import * as google from 'google';

6. add below code on OnInt method


public onInit(): Promise<void>
  {
google.charts.load("current", { packages: ["corechart"] });
return super.onInit();
  }

7. create a fucntion to LoadGoogleChart a chart
   
private LoadGoogleChart(arrayDataTable) {

// to add legend and first row in array
arrayDataTable.splice(0, 0, ['TaskList', 'Hours',{ role: 'annotation'}]);

     let data =google.visualization.arrayToDataTable(arrayDataTable);

const options = {
  title: 'My Daily Work',
  pieHole: 0.4,
};

const chart = new google.visualization.PieChart(document.getElementById('pie-chart'));
chart.draw(data, options);
  }

8. finally call your fucntion on button click or page load and pass the data in LoadGoogleChart() method as array
 
   private GraphData()
   {
  let graphDataArray=[];
  graphDataArray.push(['Work', 11]);
  graphDataArray.push(['Eat', 2]);
  graphDataArray.push(['Commute', 2]);
  graphDataArray.push(['Watch TV', 2]);
  graphDataArray.push(['Sleep', 7]);
  google.charts.setOnLoadCallback(webpart.LoadGoogleChart(graphDataArray));
   }