Related
I am trying to develop this SPFX inside our SharePoint online site # https://www.c-sharpcorner.com/article/modal-popup-in-spfx/
Where i did the following steps, but i got errors:-
Your environment has been set up for using Node.js 14.17.0 (x64) and npm.
C:\Windows\System32>md spfx-MyModalPopup
C:\Windows\System32>
C:\Windows\System32>cd spfx-MyModalPopup
C:\Windows\System32\spfx-MyModalPopup>yo #microsoft/sharepoint
_-----_
| | .--------------------------.
|--(o)--| | Welcome to the |
`---------´ | SharePoint Client-side |
( _´U`_ ) | Solution |
/___A___\ | Generator#1.12.1 |
| ~ | '--------------------------'
__'.___.'__
´ ` |° ´ Y `
Let's create a new SharePoint solution.
? What is your solution name? spfx-MyModalPopup
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.14.13
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without
running any feature deployment or adding apps in sites? No
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other c
omponents in the tenant? No
? Which type of client-side component to create? WebPart
Add new Web part to solution spfx-my-modal-popup.
? What is your Web part name? MyModalPopup
? What is your Web part description? MyModalPopup description
? Which framework would you like to use? React
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated tslint#6.1.3: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.
npm WARN deprecated gulp-util#3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated uuid#3.1.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated #types/anymatch#3.0.0: This is a stub types definition. anymatch provides its own type definitions, so you do not need this installed.
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated uuid#3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated left-pad#1.3.0: use String.prototype.padStart()
npm WARN deprecated request-promise-native#1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents#2.1.3: "Please update to latest v2.3 or v2.2"
> deasync#0.1.23 install C:\Windows\System32\spfx-MyModalPopup\node_modules\deasync
> node ./build.js
`win32-x64-node-14` exists; testing
Binary is fine; exiting
> keytar#7.7.0 install C:\Windows\System32\spfx-MyModalPopup\node_modules\keytar
> prebuild-install || npm run build
> node-sass#4.14.1 install C:\Windows\System32\spfx-MyModalPopup\node_modules\node-sass
> node scripts/install.js
Cached binary found at C:\Users\mohan\AppData\Roaming\npm-cache\node-sass\4.14.1\win32-x64-83_binding.node
> node-sass#4.14.1 postinstall C:\Windows\System32\spfx-MyModalPopup\node_modules\node-sass
> node scripts/build.js
Binary found at C:\Windows\System32\spfx-MyModalPopup\node_modules\node-sass\vendor\win32-x64-83\binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^2.1.2 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.2.7 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#~2.1.2 (node_modules\#rushstack\typings-generator\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN ajv-keywords#3.5.2 requires a peer of ajv#^6.9.1 but none is installed. You must install peer dependencies yourself.
added 2251 packages from 1153 contributors and audited 2257 packages in 134.283s
103 packages are looking for funding
run `npm fund` for details
found 126 vulnerabilities (10 low, 59 moderate, 53 high, 4 critical)
run `npm audit fix` to fix them, or `npm audit` for details
_=+#####!
###########| .--------------------------------------------.
###/ (##|(#) | Congratulations! |
### ######| \ | Solution spfx-my-modal-popup is created. |
###/ /###| (#) | Run gulp serve to play with it! |
####### ##| / '--------------------------------------------'
### /##|(#)
###########|
**=+####!
C:\Windows\System32\spfx-MyModalPopup>npm shrinkwrap
npm notice package-lock.json has been renamed to npm-shrinkwrap.json. npm-shrinkwrap.json will be used for future installations.
C:\Windows\System32\spfx-MyModalPopup>npm install #fluentui/react
npm WARN ajv-keywords#3.5.2 requires a peer of ajv#^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.1.3 (node_modules\#rushstack\typings-generator\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ #fluentui/react#8.41.1
added 24 packages from 1 contributor and audited 2281 packages in 48.731s
103 packages are looking for funding
run `npm fund` for details
found 126 vulnerabilities (10 low, 59 moderate, 53 high, 4 critical)
run `npm audit fix` to fix them, or `npm audit` for details
C:\Windows\System32\spfx-MyModalPopup>serve
'serve' is not recognized as an internal or external command,
operable program or batch file.
C:\Windows\System32\spfx-MyModalPopup>gulp serve
Build target: DEBUG
[13:37:28] Using gulpfile C:\Windows\System32\spfx-MyModalPopup\gulpfile.js
[13:37:28] Starting 'serve'...
[13:37:28] Starting gulp
[13:37:28] Starting subtask 'configure-sp-build-rig'...
[13:37:28] Finished subtask 'configure-sp-build-rig' after 3.82 ms
[13:37:28] Starting subtask 'spfx-serve'...
[13:37:28] [spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
[13:37:28] Starting server...
Starting api server on port 5432.
Registring api: /workbench
Registring api: */*
[13:37:28] Finished subtask 'spfx-serve' after 293 ms
[13:37:28] Starting subtask 'pre-copy'...
[13:37:28] Finished subtask 'pre-copy' after 60 ms
[13:37:28] Starting subtask 'copy-static-assets'...
[13:37:28] Starting subtask 'sass'...
[13:37:28] Server started https://localhost:4321
[13:37:28] LiveReload started on port 35729
[13:37:28] Running server
[13:37:28] Opening https://localhost:5432/workbench using the default OS app
Request: [::1] '/workbench'
[13:37:30] Finished subtask 'copy-static-assets' after 1.59 s
Request: '/temp/workbench.html'
Request: '/temp/manifests.js'
Request: '/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_en-us.js'
Request: '/temp/workbench-packages/#microsoft_sp-webpart-workbench/lib/api/workbenchInit.js'
[13:37:32] Finished subtask 'sass' after 3.9 s
[13:37:32] Starting subtask 'tslint'...
[13:37:32] [tslint] tslint version: 5.12.1
[13:37:32] Starting subtask 'tsc'...
[13:37:32] [tsc] typescript version: 3.7.7
Request: '/temp/workbench-packages/#microsoft_sp-webpart-workbench/lib/api/assets/server-icon.png'
[13:37:36] Error - [tsc] node_modules/#fluentui/react-hooks/lib/useTarget.d.ts(3,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react-hooks/lib/useTarget.d.ts(3,28): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react-hooks/lib/useWarnings.d.ts(1,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react-hooks/lib/useWarnings.d.ts(1,63): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/ActivityItem/ActivityItem.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/ActivityItem/ActivityItem.d.ts(2,41): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/ActivityItem/ActivityItem.types.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Announced/Announced.base.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Announced/Announced.types.d.ts(4,45): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Autofill/Autofill.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Autofill/Autofill.d.ts(2,48): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Autofill/Autofill.types.d.ts(4,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Autofill/Autofill.types.d.ts(4,33): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.base.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.base.d.ts(2,56): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.d.ts(2,39): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.types.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.types.d.ts(2,33): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.types.d.ts(3,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.types.d.ts(3,88): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.types.d.ts(4,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.types.d.ts(4,37): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.types.d.ts(5,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.types.d.ts(5,38): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.types.d.ts(6,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.types.d.ts(6,40): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.types.d.ts(7,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Breadcrumb/Breadcrumb.types.d.ts(7,35): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/ActionButton/ActionButton.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/ActionButton/ActionButton.d.ts(2,35): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/BaseButton.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/BaseButton.d.ts(2,44): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.d.ts(2,35): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(5,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(5,40): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(6,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(6,45): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(7,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(7,64): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(8,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(8,43): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(9,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(9,33): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(10,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(10,37): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(11,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/Button.types.d.ts(11,35): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/CommandBarButton/CommandBarButton.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/CommandBarButton/CommandBarButton.d.ts(2,35): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/CompoundButton/CompoundButton.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/CompoundButton/CompoundButton.d.ts(2,35): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/DefaultButton/DefaultButton.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/DefaultButton/DefaultButton.d.ts(2,35): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/IconButton/IconButton.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/IconButton/IconButton.d.ts(2,35): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/index.d.ts(13,1): error TS1128: Declaration or statement expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/index.d.ts(13,13): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/index.d.ts(13,40): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/MessageBarButton/MessageBarButton.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/MessageBarButton/MessageBarButton.d.ts(2,35): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/PrimaryButton/PrimaryButton.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/PrimaryButton/PrimaryButton.d.ts(2,35): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/SplitButton/SplitButton.classNames.d.ts(1,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Button/SplitButton/SplitButton.classNames.d.ts(1,36): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/Calendar.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/Calendar.d.ts(2,37): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/Calendar.types.d.ts(3,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/Calendar.types.d.ts(3,69): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/Calendar.types.d.ts(4,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/Calendar.types.d.ts(4,37): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/Calendar.types.d.ts(5,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/Calendar.types.d.ts(5,40): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/Calendar.types.d.ts(6,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/Calendar.types.d.ts(6,42): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/Calendar.types.d.ts(7,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/Calendar.types.d.ts(7,56): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.types.d.ts(1,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.types.d.ts(1,69): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.types.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.types.d.ts(2,47): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.types.d.ts(3,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.types.d.ts(3,37): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.types.d.ts(4,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.types.d.ts(4,96): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.types.d.ts(5,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.types.d.ts(5,56): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.types.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.types.d.ts(2,69): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.types.d.ts(3,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.types.d.ts(3,47): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.types.d.ts(4,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.types.d.ts(4,29): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.types.d.ts(5,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.types.d.ts(5,71): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.types.d.ts(6,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.types.d.ts(6,56): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarPicker/CalendarPicker.types.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarPicker/CalendarPicker.types.d.ts(2,37): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarYear/CalendarYear.types.d.ts(3,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarYear/CalendarYear.types.d.ts(3,69): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarYear/CalendarYear.types.d.ts(4,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components/Calendar/CalendarYear/CalendarYear.types.d.ts(4,47): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/#fluentui/react/lib/components
At the moment of writing, the thing is that the latest (default, 8.x) #fluentui/react is incompatible with the latest (default, 1.12.x) SPFx, it requires a newer version of typescript (3.8 at least). You have two choices: use older #fluentui/react (7.x) or upgrade the version of the typescript in your project. Here are the details how to upgrade the typescript version in SPFx:
https://stackoverflow.com/a/67961180/929187
I am following this blog to implement the fluentUI in SPFX part, but while doing "Gulp Build" I'm getting the following error:
Error - [tsc] node_modules/#fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(9,38): error TS1005: ';' expected.
[05:38:38] Error - [tsc] node_modules/#fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(10,13): error TS1005: '=' expected.
[05:38:38] Error - [tsc] node_modules/#fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(10,33): error TS1005: ';' expected.
[05:38:38] Error - [tsc] node_modules/#fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(11,13): error TS1005: '=' expected.
[05:38:38] Error - [tsc] node_modules/#fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(11,33): error TS1005: ';' expected.
[05:38:38] Error - [tsc] node_modules/#fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(12,13): error TS1005: '=' expected.
[05:38:38] Error - [tsc] node_modules/#fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(12,32): error TS1005: ';' expected.
[05:38:38] Error - [tsc] node_modules/#fluentui/react/lib/components/GroupedList/GroupFooter.d.ts(2,13): error TS1005: '=' expected.
[05:38:38] Error - [tsc] node_modules/#fluentui/react/lib/components/GroupedList/GroupFooter.d.ts(2,40): error TS1005: ';' expected.
[05:38:38] Error - [tsc] node_modules/#fluentui/react/lib/components/GroupedList/GroupFooter.d.ts(4,1): error TS1128: Declaration or statement expected.
[05:38:38] Error - [tsc] node_modules/#fluentui/react/lib/components/GroupedList/GroupFooter.d.ts(4,13): error TS1005: ';' expected
................
.......
.......
Just had the same issue. It turns out the latest release of Fluent UI uses TypeScript 3.8 syntax, so you need to update the version used by the SPFx project. Detailed instructions here: https://www.voitanos.io/blog/use-different-typescript-versions-in-sharepoint-framework-projects/. I've actually updated mine to #microsoft/rush-stack-compiler-3.9 and it's working fine now.
You can try the following to resolve this issue:
run:
npm i #microsoft/rush-stack-compiler-3.2 typescript#3.2 -D -E
And after update the tsconfig.json file:
"extends": "./node_modules/#microsoft/rush-stack-compiler-3.**2**/includes/tsconfig-web.json"
IF this doen't help try an older version:
npm install #fluentui/react#7.113.0 --save
when i start and run the nestjs app in watch mode using npm run start:dev command
then this error show.
ERROR in node_modules/jest-diff/build/diffLines.d.ts(8,13): error TS1005: '=' expected.
node_modules/jest-diff/build/diffLines.d.ts(8,34): error TS1005: ';' expected.
node_modules/jest-diff/build/index.d.ts(10,13): error TS1005: '=' expected.
node_modules/jest-diff/build/index.d.ts(10,34): error TS1005: ';' expected.
node_modules/jest-diff/build/index.d.ts(11,1): error TS1128: Declaration or statement expected.
node_modules/jest-diff/build/index.d.ts(11,13): error TS1005: ';' expected.
node_modules/jest-diff/build/index.d.ts(11,52): error TS1005: ';' expected.
node_modules/jest-diff/build/printDiffs.d.ts(8,13): error TS1005: '=' expected.
node_modules/jest-diff/build/printDiffs.d.ts(8,57): error TS1005: ';' expected.
you have to update your typescript version with the latest version of typescript in your package.json file
in my case, I update with
"typescript": "^3.9.7"
If your typescript version is "3.2.4", downgrade jest-diff to version 25.5.0. This will fix the issue.
npm i jest-diff#25.5.0
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.
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).
I have followed various thread here but I can't get it to work.
I'd like to compile the following code in typescript.
This code come from a single js file, but since my problems come from modle inclusion I'm compiling just this:
import tweetnacl from "./node_modules/tweetnacl/nacl";
console.log(`here we are`);
What I have tried:
Using this tsconfig.json
{
"compilerOptions": {
"target":"ES6",
"moduleResolution": "classic",
}
}
Compiling with tsc --module es6 --target es6
and secify every option for module
npm install #types/node
also did not worked for me.
I run tsc --module commonjs test.ts and get
node_modules/tweetnacl/nacl.d.ts(3,1): error TS1128: Declaration or statement expected.
node_modules/tweetnacl/nacl.d.ts(3,11): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(3,25): error TS1005: '{' expected.
node_modules/tweetnacl/nacl.d.ts(21,81): error TS1110: Type expected.
node_modules/tweetnacl/nacl.d.ts(22,9): error TS1131: Property or signature expected.
node_modules/tweetnacl/nacl.d.ts(22,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(23,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(24,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(30,9): error TS1131: Property or signature expected.
node_modules/tweetnacl/nacl.d.ts(30,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(31,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(32,5): error TS1128: Declaration or statement expected.
node_modules/tweetnacl/nacl.d.ts(36,110): error TS1110: Type expected.
node_modules/tweetnacl/nacl.d.ts(37,86): error TS1110: Type expected.
node_modules/tweetnacl/nacl.d.ts(52,9): error TS1131: Property or signature expected.
node_modules/tweetnacl/nacl.d.ts(52,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(53,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(54,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(55,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(56,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(57,5): error TS1128: Declaration or statement expected.
node_modules/tweetnacl/nacl.d.ts(74,74): error TS1110: Type expected.
node_modules/tweetnacl/nacl.d.ts(77,9): error TS1131: Property or signature expected.
node_modules/tweetnacl/nacl.d.ts(77,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(78,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(79,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(80,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(81,5): error TS1128: Declaration or statement expected.
node_modules/tweetnacl/nacl.d.ts(85,9): error TS1131: Property or signature expected.
node_modules/tweetnacl/nacl.d.ts(85,18): error TS1005: ';' expected.
node_modules/tweetnacl/nacl.d.ts(86,5): error TS1128: Declaration or statement expected.
node_modules/tweetnacl/nacl.d.ts(87,1): error TS1128: Declaration or statement expected.
How can I get node module work in typescript?
Thanks in advance
EDIT:
After updating tsc
tsc --v
Version 3.0.1
I got this error
test.ts:1:8 - error TS1192: Module '"./node_modules/tweetnacl/nacl"' has no default export.
1 import tweetnacl from "tweetnacl";
~~~~~~~~~
Assuming that your node_modules/tweetnacl/nacl.d.ts file looks like this, based on the line and column numbers of the errors, it looks like TypeScript is having trouble parsing multiple language constructs that were added in TypeScript 2.0. If you are using a version of TypeScript older than 2.0 (two years old as of this writing!), try upgrading.
Round 2: The tweetnacl module indeed has no default export. It looks like the import should be:
import * as tweetnacl from "./node_modules/tweetnacl/nacl";