build: upgrade to SPFx 1.18.2

.vscode/launch.json

@@ -3,9 +3,9 @@
   "configurations": [
     {
       "name": "Hosted workbench",
-      "type": "pwa-chrome",
+      "type": "msedge",
       "request": "launch",
-      "url": "https://m365x24002320.sharepoint.com/_layouts/workbench.aspx",
+      "url": "https://{tenantDomain}/_layouts/workbench.aspx",
       "webRoot": "${workspaceRoot}",
       "sourceMaps": true,
       "sourceMapPathOverrides": {
@@ -14,10 +14,7 @@
         "webpack:///../../../../src/*": "${webRoot}/src/*",
         "webpack:///../../../../../src/*": "${webRoot}/src/*"
       },
-      "runtimeArgs": [
+      "runtimeArgs": ["--remote-debugging-port=9222", "-incognito"]
-        "--remote-debugging-port=9222",
-        "-incognito"
-      ]
     }
   ]
 }

.vscode/settings.json

@@ -7,7 +7,8 @@
     "**/bower_components": true,
     "**/coverage": true,
     "**/lib-amd": true,
-    "src/**/*.scss.ts": true
+    "src/**/*.scss.ts": true,
+    "**/jest-output": true
   },
   "typescript.tsdk": ".\\node_modules\\typescript\\lib"
 }

.yo-rc.json

@@ -7,12 +7,12 @@
     "componentName": "AwardRecognition",
     "plusBeta": false,
     "isCreatingSolution": true,
-    "nodeVersion": "16.18.1",
+    "nodeVersion": "18.18.2",
     "sdksVersions": {
       "@microsoft/microsoft-graph-client": "3.0.2",
-      "@microsoft/teams-js": "2.4.1"
+      "@microsoft/teams-js": "2.12.0"
     },
-    "version": "1.16.1",
+    "version": "1.18.2",
     "libraryName": "award-recognition",
     "libraryId": "45e061b8-13f5-423f-bedb-12fc2a44fa89",
     "environment": "spo",

config/serve.json

@@ -2,5 +2,5 @@
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://m365x24002320.sharepoint.com/_layouts/workbench.aspx"
+  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
 }

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "engines": {
-    "node": ">=16.13.0 <17.0.0"
+    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
   },
   "main": "lib/index.js",
   "scripts": {
@@ -12,14 +12,15 @@
     "test": "gulp test"
   },
   "dependencies": {
+    "@fluentui/react": "8.106.4",
     "@fluentui/react-components": "^9.40.0",
-    "@microsoft/sp-core-library": "1.16.1",
+    "@microsoft/sp-adaptive-card-extension-base": "1.18.2",
-    "@microsoft/sp-lodash-subset": "1.16.1",
+    "@microsoft/sp-core-library": "1.18.2",
-    "@microsoft/sp-office-ui-fabric-core": "1.16.1",
+    "@microsoft/sp-lodash-subset": "1.18.2",
-    "@microsoft/sp-property-pane": "1.16.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.18.2",
-    "@microsoft/sp-webpart-base": "1.16.1",
+    "@microsoft/sp-property-pane": "1.18.2",
+    "@microsoft/sp-webpart-base": "1.18.2",
     "@pnp/sp": "^3.20.0",
-    "office-ui-fabric-react": "^7.199.1",
     "pnp-react-hooks": "^1.3.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
@@ -27,11 +28,12 @@
     "tslib": "2.3.1"
   },
   "devDependencies": {
-    "@microsoft/eslint-config-spfx": "1.16.1",
+    "@microsoft/eslint-config-spfx": "1.18.2",
-    "@microsoft/eslint-plugin-spfx": "1.16.1",
+    "@microsoft/eslint-plugin-spfx": "1.18.2",
     "@microsoft/rush-stack-compiler-4.5": "0.2.2",
-    "@microsoft/sp-build-web": "1.16.1",
+    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
-    "@microsoft/sp-module-interfaces": "1.16.1",
+    "@microsoft/sp-build-web": "1.18.2",
+    "@microsoft/sp-module-interfaces": "1.18.2",
     "@rushstack/eslint-config": "2.5.1",
     "@types/react": "17.0.45",
     "@types/react-dom": "17.0.17",
@@ -40,6 +42,6 @@
     "eslint": "8.7.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "gulp": "4.0.2",
-    "typescript": "4.5.5"
+    "typescript": "4.7.4"
   }
 }

spfx.upgrade.md

@@ -0,0 +1,408 @@
+# Upgrade project award-recognition-client-side-solution to v1.18.2
+
+Date: 16/03/2024
+
+## Findings
+
+Following is the list of steps required to upgrade your project to SharePoint Framework version 1.18.2. [Summary](#Summary) of the modifications is included at the end of the report.
+
+### FN001001 @microsoft/sp-core-library | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-core-library
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-core-library@1.18.2
+```
+
+File: [./package.json:16:5](./package.json)
+
+### FN001002 @microsoft/sp-lodash-subset | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-lodash-subset@1.18.2
+```
+
+File: [./package.json:17:5](./package.json)
+
+### FN001003 @microsoft/sp-office-ui-fabric-core | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-office-ui-fabric-core
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-office-ui-fabric-core@1.18.2
+```
+
+File: [./package.json:18:5](./package.json)
+
+### FN001004 @microsoft/sp-webpart-base | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-webpart-base@1.18.2
+```
+
+File: [./package.json:20:5](./package.json)
+
+### FN001021 @microsoft/sp-property-pane | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-property-pane
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-property-pane@1.18.2
+```
+
+File: [./package.json:19:5](./package.json)
+
+### FN001034 @microsoft/sp-adaptive-card-extension-base | Optional
+
+Install SharePoint Framework dependency package @microsoft/sp-adaptive-card-extension-base
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-adaptive-card-extension-base@1.18.2
+```
+
+File: [./package.json:14:3](./package.json)
+
+### FN002001 @microsoft/sp-build-web | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/sp-build-web@1.18.2
+```
+
+File: [./package.json:33:5](./package.json)
+
+### FN002002 @microsoft/sp-module-interfaces | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/sp-module-interfaces@1.18.2
+```
+
+File: [./package.json:34:5](./package.json)
+
+### FN002022 @microsoft/eslint-plugin-spfx | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/eslint-plugin-spfx
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/eslint-plugin-spfx@1.18.2
+```
+
+File: [./package.json:31:5](./package.json)
+
+### FN002023 @microsoft/eslint-config-spfx | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/eslint-config-spfx
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/eslint-config-spfx@1.18.2
+```
+
+File: [./package.json:30:5](./package.json)
+
+### FN010001 .yo-rc.json version | Recommended
+
+Update version in .yo-rc.json
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "version": "1.18.2"
+  }
+}
+```
+
+File: [./.yo-rc.json:15:5](./.yo-rc.json)
+
+### FN001022 office-ui-fabric-react | Required
+
+Remove SharePoint Framework dependency package office-ui-fabric-react
+
+Execute the following command:
+
+```sh
+npm un -S office-ui-fabric-react
+```
+
+File: [./package.json:22:5](./package.json)
+
+### FN014010 Exclude Jest output files in .vscode/settings.json | Required
+
+Add excluding Jest output files in .vscode/settings.json
+
+```json
+{
+  "files.exclude": {
+    "**/jest-output": true
+  }
+}
+```
+
+File: [.vscode/settings.json:4:3](.vscode/settings.json)
+
+### FN001035 @fluentui/react | Required
+
+Install SharePoint Framework dependency package @fluentui/react
+
+Execute the following command:
+
+```sh
+npm i -SE @fluentui/react@8.106.4
+```
+
+File: [./package.json:14:3](./package.json)
+
+### FN002026 typescript | Required
+
+Upgrade SharePoint Framework dev dependency package typescript
+
+Execute the following command:
+
+```sh
+npm i -DE typescript@4.7.4
+```
+
+File: [./package.json:43:5](./package.json)
+
+### FN002028 @microsoft/rush-stack-compiler-4.7 | Required
+
+Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-4.7
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/rush-stack-compiler-4.7@0.1.0
+```
+
+File: [./package.json:29:3](./package.json)
+
+### FN010010 .yo-rc.json @microsoft/teams-js SDK version | Recommended
+
+Update @microsoft/teams-js SDK version in .yo-rc.json
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "sdkVersions": {
+      "@microsoft/teams-js": "2.12.0"
+    }
+  }
+}
+```
+
+File: [./.yo-rc.json:2:3](./.yo-rc.json)
+
+### FN012017 tsconfig.json extends property | Required
+
+Update tsconfig.json extends property
+
+```json
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json"
+}
+```
+
+File: [./tsconfig.json:2:3](./tsconfig.json)
+
+### FN021003 package.json engines.node | Required
+
+Update package.json engines.node property
+
+```json
+{
+  "engines": {
+    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
+  }
+}
+```
+
+File: [./package.json:6:5](./package.json)
+
+### FN014008 Hosted workbench type in .vscode/launch.json | Recommended
+
+In the .vscode/launch.json file, update the type property for the hosted workbench launch configuration
+
+```json
+{
+  "configurations": [
+    {
+      "type": "msedge"
+    }
+  ]
+}
+```
+
+File: [.vscode/launch.json:8:7](.vscode/launch.json)
+
+### FN007002 serve.json initialPage | Required
+
+Update serve.json initialPage URL
+
+```json
+{
+  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
+}
+```
+
+File: [./config/serve.json:5:3](./config/serve.json)
+
+### FN014009 Hosted workbench URL in .vscode/launch.json | Recommended
+
+In the .vscode/launch.json file, update the url property for the hosted workbench launch configuration
+
+```json
+{
+  "configurations": [
+    {
+      "url": "https://{tenantDomain}/_layouts/workbench.aspx"
+    }
+  ]
+}
+```
+
+File: [.vscode/launch.json:8:7](.vscode/launch.json)
+
+### FN017001 Run npm dedupe | Optional
+
+If, after upgrading npm packages, when building the project you have errors similar to: "error TS2345: Argument of type 'SPHttpClientConfiguration' is not assignable to parameter of type 'SPHttpClientConfiguration'", try running 'npm dedupe' to cleanup npm packages.
+
+Execute the following command:
+
+```sh
+npm dedupe
+```
+
+File: [./package.json](./package.json)
+
+## Summary
+
+### Execute script
+
+```sh
+npm un -S office-ui-fabric-react
+npm i -SE @microsoft/sp-core-library@1.18.2 @microsoft/sp-lodash-subset@1.18.2 @microsoft/sp-office-ui-fabric-core@1.18.2 @microsoft/sp-webpart-base@1.18.2 @microsoft/sp-property-pane@1.18.2 @microsoft/sp-adaptive-card-extension-base@1.18.2 @fluentui/react@8.106.4
+npm i -DE @microsoft/sp-build-web@1.18.2 @microsoft/sp-module-interfaces@1.18.2 @microsoft/eslint-plugin-spfx@1.18.2 @microsoft/eslint-config-spfx@1.18.2 typescript@4.7.4 @microsoft/rush-stack-compiler-4.7@0.1.0
+npm dedupe
+```
+
+### Modify files
+
+#### [./.yo-rc.json](./.yo-rc.json)
+
+Update version in .yo-rc.json:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "version": "1.18.2"
+  }
+}
+```
+
+Update @microsoft/teams-js SDK version in .yo-rc.json:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "sdkVersions": {
+      "@microsoft/teams-js": "2.12.0"
+    }
+  }
+}
+```
+
+#### [.vscode/settings.json](.vscode/settings.json)
+
+Add excluding Jest output files in .vscode/settings.json:
+
+```json
+{
+  "files.exclude": {
+    "**/jest-output": true
+  }
+}
+```
+
+#### [./tsconfig.json](./tsconfig.json)
+
+Update tsconfig.json extends property:
+
+```json
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json"
+}
+```
+
+#### [./package.json](./package.json)
+
+Update package.json engines.node property:
+
+```json
+{
+  "engines": {
+    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
+  }
+}
+```
+
+#### [.vscode/launch.json](.vscode/launch.json)
+
+In the .vscode/launch.json file, update the type property for the hosted workbench launch configuration:
+
+```json
+{
+  "configurations": [
+    {
+      "type": "msedge"
+    }
+  ]
+}
+```
+
+In the .vscode/launch.json file, update the url property for the hosted workbench launch configuration:
+
+```json
+{
+  "configurations": [
+    {
+      "url": "https://{tenantDomain}/_layouts/workbench.aspx"
+    }
+  ]
+}
+```
+
+#### [./config/serve.json](./config/serve.json)
+
+Update serve.json initialPage URL:
+
+```json
+{
+  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
+}
+```

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
   "compilerOptions": {
     "baseUrl": ".",
     "target": "es5",