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 those 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
create package.json
create config\package-solution.json
create config\config.json
create config\serve.json
create gulpfile.js
create tsconfig.json
create .vscode\extensions.json
create .vscode\launch.json
create .vscode\settings.json
create config\copy-assets.json
create config\deploy-azure-storage.json
create config\write-manifests.json
create src\index.ts
create README.md
create tslint.json
create .gitignore
create src\webparts\myModalPopup\components\IMyModalPopupProps.ts
create src\webparts\myModalPopup\components\MyModalPopup.module.scss
create src\webparts\myModalPopup\components\MyModalPopup.tsx
create src\webparts\myModalPopup\MyModalPopupWebPart.ts
create src\webparts\myModalPopup\loc\en-us.js
create src\webparts\myModalPopup\loc\mystrings.d.ts
create src\webparts\myModalPopup\MyModalPopupWebPart.manifest.json
create teams\9b9a482d-c271-4faf-a021-14549f150f4b_outline.png
create teams\9b9a482d-c271-4faf-a021-14549f150f4b_color.png
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/Calendar/CalendarYear/CalendarYear.types.d.ts(5,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/Calendar/CalendarYear/CalendarYear.types.d.ts(5,29): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/Calendar/CalendarYear/CalendarYear.types.d.ts(6,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/Calendar/CalendarYear/CalendarYear.types.d.ts(6,71): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/Calendar/defaults.d.ts(1,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/Calendar/defaults.d.ts(1,47): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/Calendar/defaults.d.ts(2,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/Calendar/defaults.d.ts(2,39): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/Calendar/index.d.ts(10,1): error TS1128: Declaration or statement expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/Calendar/index.d.ts(10,13): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/Calendar/index.d.ts(10,56): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.types.d.ts(3,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.types.d.ts(3,69): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.types.d.ts(4,13): error TS1005: '=' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.types.d.ts(4,73): error TS1005: ';' expected.
[13:37:36] Error - [tsc] node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.types.d.ts(5,13): error TS1005: '=' expected.
Hi @john john ,
The current release of @microsoft/generator-sharepoint defaults to TypeScript 3.7. This causes build breaks when customers use libraries that have been written on newer releases. Please update the default installed compiler to 3.9 or greater.
Fluent UI has a minimum requirement of TS 3.9 (published May 2020.) When using language features in TS 3.9, they cause issues with customers on older releases. Subsequently customers using the yeoman template to generate a webpart will hit TypeScript issues using libraries like Fluent UI.
Customers can work around this by replacing @microsoft/rush-stack-compiler-3.7 with @microsoft/rush-stack-compiler-3.9.
Please run following cmdlet
npm uninstall -D @microsoft/rush-stack-compiler-3.7
npm install -D @microsoft/rush-stack-compiler-3.9
and update tsconfig
If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
@RaytheonXie_MSFT ok worked thanks a lot ... but should i run the :-
npm uninstall -D @microsoft/rush-stack-compiler-3.7
npm install -D @microsoft/rush-stack-compiler-3.9
inside the project directory or directly inside the C directory? i did both , so i am not sure which one is actually the required step.
Thanks
