honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

version upgrade for birthdays webpart

This commit is contained in:
Valeras Narbutas 2023-03-06 16:30:21 +02:00
parent cfdb04786d
commit acbd3ce97e
19 changed files with 8266 additions and 3660 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
samples/react-birthdays/.devcontainer/devcontainer.json
View File

@ -1,7 +1,7 @@
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer // For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
{ {
"name": "SPFx 1.14.0", "name": "SPFx 1.16.1",
"image": "docker.io/m365pnp/spfx:1.14.0", "image": "docker.io/m365pnp/spfx:1.16.1",
// Set *default* container specific settings.json values on container create. // Set *default* container specific settings.json values on container create.
"settings": {}, "settings": {},
// Add the IDs of extensions you want installed when the container is created. // Add the IDs of extensions you want installed when the container is created.

5
samples/react-birthdays/.eslintrc.js Normal file
View File

@ -0,0 +1,5 @@
require('@rushstack/eslint-config/patch/modern-module-resolution');
module.exports = {
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
parserOptions: { tsconfigRootDir: __dirname }
};

1
samples/react-birthdays/.gitignore vendored
View File

@ -13,6 +13,7 @@ solution
temp temp
release release
*.sppkg *.sppkg
.heft
# Coverage directory used by tools like istanbul # Coverage directory used by tools like istanbul
coverage coverage

10
samples/react-birthdays/.yo-rc.json
View File

@ -1,12 +1,18 @@
{ {
"@microsoft/generator-sharepoint": { "@microsoft/generator-sharepoint": {
"version": "1.14.0", "version": "1.16.1",
"nodeVersion": "14.18.1",
"libraryName": "happy-birthday", "libraryName": "happy-birthday",
"libraryId": "57890dd1-b655-4ec8-85ec-e47a9b696e7c", "libraryId": "57890dd1-b655-4ec8-85ec-e47a9b696e7c",
"environment": "spo", "environment": "spo",
"packageManager": "npm", "packageManager": "npm",
"isCreatingSolution": true, "isCreatingSolution": true,
"isDomainIsolated": false, "isDomainIsolated": false,
"componentType": "webpart" "componentType": "webpart",
"sdkVersions": {
"@microsoft/microsoft-graph-client": "3.0.2",
"@microsoft/teams-js": "2.4.1"
}
} }
} }

1
samples/react-birthdays/README.md
View File

@ -62,6 +62,7 @@ Version|Date|Comments
1.1.0|July 23, 2019 | new version 1.1.0|July 23, 2019 | new version
2.0.0|June 16, 2021 | Upgraded to SPFx 1.12.1 2.0.0|June 16, 2021 | Upgraded to SPFx 1.12.1
3.0.0|April 7, 2022 | Upgraded to SPFx 1.14.0 3.0.0|April 7, 2022 | Upgraded to SPFx 1.14.0
4.0.0|March 6, 2023 | Upgraded to SPFx 1.16.1
## Minimal Path to Awesome ## Minimal Path to Awesome

11
samples/react-birthdays/assets/sample.json
View File

@ -9,7 +9,7 @@
"The Web Part Birthdays shows the upcoming birthdays in the company, the web part reads birthdays from a list located on the tenant\u0027s root site with title \u0022Birthdays.\u0022" "The Web Part Birthdays shows the upcoming birthdays in the company, the web part reads birthdays from a list located on the tenant\u0027s root site with title \u0022Birthdays.\u0022"
], ],
"creationDateTime": "2019-07-23", "creationDateTime": "2019-07-23",
"updateDateTime": "2022-04-07", "updateDateTime": "2023-03-06",
"products": [ "products": [
"SharePoint" "SharePoint"
], ],
@ -20,7 +20,7 @@
}, },
{ {
"key": "SPFX-VERSION", "key": "SPFX-VERSION",
"value": "1.14.0" "value": "1.16.1"
}, },
{ {
"key": "SPFX-TEAMSTAB", "key": "SPFX-TEAMSTAB",
@ -220,6 +220,13 @@
} }
], ],
"authors": [ "authors": [
{
"gitHubAccount": "ValerasNarbutas",
"company": "Macaw",
"pictureUrl": "https://github.com/ValerasNarbutas.png",
"name": "Valeras Narbutas",
"twitter": "ValerasNarbutas"
},
{ {
"gitHubAccount": "joaojmendes", "gitHubAccount": "joaojmendes",
"company": "Storm Technology Ltd", "company": "Storm Technology Ltd",

6
samples/react-birthdays/config/package-solution.json
View File

@ -3,7 +3,7 @@
"solution": { "solution": {
"name": "happy-birthday-anniversary-client-side-solution", "name": "happy-birthday-anniversary-client-side-solution",
"id": "474e78f8-113f-4057-a9a9-640241137620", "id": "474e78f8-113f-4057-a9a9-640241137620",
"version": "3.0.0.0", "version": "4.0.0.0",
"includeClientSideAssets": true, "includeClientSideAssets": true,
"skipFeatureDeployment": true, "skipFeatureDeployment": true,
"isDomainIsolated": false, "isDomainIsolated": false,
@ -12,7 +12,7 @@
"privacyUrl": "", "privacyUrl": "",
"termsOfUseUrl": "", "termsOfUseUrl": "",
"websiteUrl": "", "websiteUrl": "",
"mpnId": "Undefined-1.14.0" "mpnId": "Undefined-1.16.1"
}, },
"metadata": { "metadata": {
"shortDescription": { "shortDescription": {
@ -30,7 +30,7 @@
"title": "birthdays-anniversary Feature", "title": "birthdays-anniversary Feature",
"description": "The feature that activates elements of the birthdays-anniversary solution.", "description": "The feature that activates elements of the birthdays-anniversary solution.",
"id": "22eb0871-ae82-49b1-8d14-9dd9e1ec4d30", "id": "22eb0871-ae82-49b1-8d14-9dd9e1ec4d30",
"version": "3.0.0.0" "version": "4.0.0.0"
} }
], ],
"webApiPermissionRequests": [ "webApiPermissionRequests": [

3
samples/react-birthdays/config/sass.json Normal file
View File

@ -0,0 +1,3 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
}

2
samples/react-birthdays/config/serve.json
View File

@ -1,5 +1,5 @@
{ {
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json", "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
"port": 4321, "port": 4321,
"https": true, "https": true,
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx" "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"

11086
samples/react-birthdays/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

44
samples/react-birthdays/package.json
View File

@ -8,13 +8,18 @@
"clean": "gulp clean", "clean": "gulp clean",
"test": "gulp test" "test": "gulp test"
}, },
"engines": {
"node": ">=16.13.0 <17.0.0"
},
"dependencies": { "dependencies": {
"@microsoft/loader-set-webpack-public-path": "^3.4.5", "@microsoft/loader-set-webpack-public-path": "^3.4.5",
"@microsoft/sp-core-library": "1.14.0", "@microsoft/sp-adaptive-card-extension-base": "1.16.1",
"@microsoft/sp-lodash-subset": "1.14.0", "@microsoft/sp-core-library": "1.16.1",
"@microsoft/sp-office-ui-fabric-core": "1.14.0", "@microsoft/sp-http": "^1.16.1",
"@microsoft/sp-property-pane": "1.14.0", "@microsoft/sp-lodash-subset": "1.16.1",
"@microsoft/sp-webpart-base": "1.14.0", "@microsoft/sp-office-ui-fabric-core": "1.16.1",
"@microsoft/sp-property-pane": "1.16.1",
"@microsoft/sp-webpart-base": "1.16.1",
"@pnp/common": "^1.3.11", "@pnp/common": "^1.3.11",
"@pnp/graph": "^1.3.11", "@pnp/graph": "^1.3.11",
"@pnp/logging": "^1.3.11", "@pnp/logging": "^1.3.11",
@ -23,22 +28,29 @@
"@pnp/spfx-controls-react": "3.7.2", "@pnp/spfx-controls-react": "3.7.2",
"@pnp/spfx-property-controls": "1.12.0", "@pnp/spfx-property-controls": "1.12.0",
"moment": "^2.29.1", "moment": "^2.29.1",
"office-ui-fabric-react": "7.174.1", "office-ui-fabric-react": "7.199.1",
"react": "16.13.1", "react": "17.0.1",
"react-dom": "16.13.1" "react-dom": "17.0.1",
"tslib": "2.3.1"
}, },
"devDependencies": { "devDependencies": {
"@microsoft/eslint-config-spfx": "1.16.1",
"@microsoft/eslint-plugin-spfx": "1.16.1",
"@microsoft/rush-stack-compiler-3.9": "0.4.48", "@microsoft/rush-stack-compiler-3.9": "0.4.48",
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
"@microsoft/set-webpack-public-path-plugin": "^2.4.0", "@microsoft/set-webpack-public-path-plugin": "^2.4.0",
"@microsoft/sp-build-web": "1.14.0", "@microsoft/sp-build-web": "1.16.1",
"@microsoft/sp-module-interfaces": "1.14.0", "@microsoft/sp-module-interfaces": "1.16.1",
"@microsoft/sp-tslint-rules": "1.14.0", "@rushstack/eslint-config": "2.5.1",
"@types/es6-promise": "0.0.33", "@types/es6-promise": "0.0.33",
"@types/react": "16.9.51", "@types/react": "17.0.45",
"@types/react-dom": "16.9.8", "@types/react-dom": "17.0.17",
"@types/webpack-env": "1.13.1", "@types/webpack-env": "1.15.2",
"ajv": "~5.2.2", "ajv": "6.12.5",
"gulp": "4.0.2" "eslint": "8.7.0",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"typescript": "4.5.5"
}, },
"resolutions": { "resolutions": {
"@types/react": "16.8.8" "@types/react": "16.8.8"

2
samples/react-birthdays/src/controls/happyBirthdayCard/HappyBirthdayCard.module.scss
View File

@ -1,4 +1,4 @@
@import '~office-ui-fabric-react/dist/sass/References.scss'; @import '~@fluentui/react/dist/sass/References.scss';
.happyBirthday { .happyBirthday {
.documentCard { .documentCard {

12
samples/react-birthdays/src/controls/happyBirthdayCard/HappyBirthdayCard.tsx
View File

@ -16,7 +16,13 @@ const img: string = require('../../../assets/cof11.png');
const IMG_WIDTH: number = 200; const IMG_WIDTH: number = 200;
const IMG_HEIGTH: number = 190; const IMG_HEIGTH: number = 190;
const imageTemplate: { imageUrl: string }[] = [{ interface IImageTemplate {
[key: string]: {
imageUrl: string
}
}
const imageTemplate: IImageTemplate[] = [{
imageUrl: require('.../../../assets/cof.png') imageUrl: require('.../../../assets/cof.png')
}, },
{ {
@ -115,9 +121,9 @@ export class HappyBirthdayCard extends React.Component<IHappyBirthdayCardProps,
<div className={styles.documentCardWrapper}> <div className={styles.documentCardWrapper}>
<div className={styles.documentCard}> <div className={styles.documentCard}>
<Image <Image
imageFit={ImageFit.cover} imageFit={ImageFit.cover}
src={imageTemplate[this.props.imageTemplate].imageUrl} // @ts-ignore: Object is possibly 'null'.
src={imageTemplate[this.props.imageTemplate]?.imageUrl}
width={IMG_WIDTH} width={IMG_WIDTH}
height={IMG_HEIGTH} height={IMG_HEIGTH}
/> />

2
samples/react-birthdays/src/controls/happybirthday/HappyBirthday.module.scss
View File

@ -1,4 +1,4 @@
@import '~office-ui-fabric-react/dist/sass/References.scss'; @import '~@fluentui/react/dist/sass/References.scss';
.happyBirthday { .happyBirthday {
.backgroundImgBallons{ .backgroundImgBallons{

7
samples/react-birthdays/src/services/SPService.ts
View File

@ -1,9 +1,10 @@
import { WebPartContext } from "@microsoft/sp-webpart-base"; import { WebPartContext } from "@microsoft/sp-webpart-base";
import { MSGraphClient } from "@microsoft/sp-http"; import { MSGraphClientV3 } from "@microsoft/sp-http";
import * as moment from 'moment'; import * as moment from 'moment';
import { version } from "react";
export class SPService { export class SPService {
private graphClient: MSGraphClient = null; private graphClient: MSGraphClientV3 = null;
private birthdayListTitle: string = "Birthdays"; private birthdayListTitle: string = "Birthdays";
constructor(private _context: WebPartContext) { constructor(private _context: WebPartContext) {
@ -44,7 +45,7 @@ export class SPService {
_filter = "fields/Birthday ge '" + _today + "' and fields/Birthday le '" + _FinalDate + "'"; _filter = "fields/Birthday ge '" + _today + "' and fields/Birthday le '" + _FinalDate + "'";
} }
this.graphClient = await this._context.msGraphClientFactory.getClient(); this.graphClient = await this._context.msGraphClientFactory.getClient('3');
_results = await this.graphClient.api(`sites/root/lists('${this.birthdayListTitle}')/items?orderby=Fields/Birthday`) _results = await this.graphClient.api(`sites/root/lists('${this.birthdayListTitle}')/items?orderby=Fields/Birthday`)
.version('v1.0') .version('v1.0')
.expand('fields') .expand('fields')

2
samples/react-birthdays/src/webparts/Birthdays/components/Birthdays.module.scss
View File

@ -1,4 +1,4 @@
@import '~office-ui-fabric-react/dist/sass/References.scss'; @import '~@fluentui/react/dist/sass/References.scss';
.happyBirthday { .happyBirthday {
.backgroundImgBallons{ .backgroundImgBallons{

3
samples/react-birthdays/tsconfig.json
View File

@ -1,5 +1,5 @@
{ {
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json", "extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
@ -14,6 +14,7 @@
"noUnusedLocals": false, "noUnusedLocals": false,
"inlineSources": false, "inlineSources": false,
"strictNullChecks": false, "strictNullChecks": false,
"noImplicitAny": true,
"typeRoots": [ "typeRoots": [
"./node_modules/@types", "./node_modules/@types",
"./node_modules/@microsoft" "./node_modules/@microsoft"

29
samples/react-birthdays/tslint.json
View File

@ -1,29 +0,0 @@
{
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}

696
samples/react-birthdays/upgrade-report.md Normal file
View File

@ -0,0 +1,696 @@
# Upgrade project react-birthdays to v1.16.1
Date: 2023-03-06
## Findings
Following is the list of steps required to upgrade your project to SharePoint Framework version 1.16.1. [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.16.1
```
File: [./package.json:13: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.16.1
```
File: [./package.json:14: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.16.1
```
File: [./package.json:15: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.16.1
```
File: [./package.json:17: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.16.1
```
File: [./package.json:16: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.16.1
```
File: [./package.json:11:3](./package.json)
### FN002022 @microsoft/eslint-plugin-spfx | Required
Install SharePoint Framework dev dependency package @microsoft/eslint-plugin-spfx
Execute the following command:
```sh
npm i -DE @microsoft/eslint-plugin-spfx@1.16.1
```
File: [./package.json:30:3](./package.json)
### FN002023 @microsoft/eslint-config-spfx | Required
Install SharePoint Framework dev dependency package @microsoft/eslint-config-spfx
Execute the following command:
```sh
npm i -DE @microsoft/eslint-config-spfx@1.16.1
```
File: [./package.json:30: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.16.1
```
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.16.1
```
File: [./package.json:34:5](./package.json)
### FN010001 .yo-rc.json version | Recommended
Update version in .yo-rc.json
```json
{
"@microsoft/generator-sharepoint": {
"version": "1.16.1"
}
}
```
File: [./.yo-rc.json:3:5](./.yo-rc.json)
### FN015009 config\sass.json | Required
Add file config\sass.json
Execute the following command:
```sh
cat > "config\sass.json" << EOF
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
}
EOF
```
File: [config\sass.json](config\sass.json)
### FN001008 react | Required
Upgrade SharePoint Framework dependency package react
Execute the following command:
```sh
npm i -SE react@17.0.1
```
File: [./package.json:27:5](./package.json)
### FN001009 react-dom | Required
Upgrade SharePoint Framework dependency package react-dom
Execute the following command:
```sh
npm i -SE react-dom@17.0.1
```
File: [./package.json:28:5](./package.json)
### FN001022 office-ui-fabric-react | Required
Upgrade SharePoint Framework dependency package office-ui-fabric-react
Execute the following command:
```sh
npm i -SE office-ui-fabric-react@7.199.1
```
File: [./package.json:26:5](./package.json)
### FN002015 @types/react | Required
Upgrade SharePoint Framework dev dependency package @types/react
Execute the following command:
```sh
npm i -DE @types/react@17.0.45
```
File: [./package.json:37:5](./package.json)
### FN002016 @types/react-dom | Required
Upgrade SharePoint Framework dev dependency package @types/react-dom
Execute the following command:
```sh
npm i -DE @types/react-dom@17.0.17
```
File: [./package.json:38:5](./package.json)
### FN010008 .yo-rc.json nodeVersion | Recommended
Update nodeVersion in .yo-rc.json
```json
{
"@microsoft/generator-sharepoint": {
"nodeVersion": "14.18.1"
}
}
```
File: [./.yo-rc.json:2:38](./.yo-rc.json)
### FN010009 .yo-rc.json @microsoft/microsoft-graph-client SDK version | Recommended
Update @microsoft/microsoft-graph-client SDK version in .yo-rc.json
```json
{
"@microsoft/generator-sharepoint": {
"sdkVersions": {
"@microsoft/microsoft-graph-client": "3.0.2"
}
}
}
```
File: [./.yo-rc.json:2:3](./.yo-rc.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.4.1"
}
}
}
```
File: [./.yo-rc.json:2:3](./.yo-rc.json)
### FN021003 package.json engines.node | Required
Update package.json engines.node property
```json
{
"engines": {
"node": ">=16.13.0 <17.0.0"
}
}
```
File: [./package.json:1:1](./package.json)
### FN022001 Scss file import | Required
Remove scss file import
```scss
@import '~office-ui-fabric-react/dist/sass/References.scss'
```
File: [src\controls\happybirthday\HappyBirthday.module.scss](src\controls\happybirthday\HappyBirthday.module.scss)
### FN022001 Scss file import | Required
Remove scss file import
```scss
@import '~office-ui-fabric-react/dist/sass/References.scss'
```
File: [src\controls\happyBirthdayCard\HappyBirthdayCard.module.scss](src\controls\happyBirthdayCard\HappyBirthdayCard.module.scss)
### FN022001 Scss file import | Required
Remove scss file import
```scss
@import '~office-ui-fabric-react/dist/sass/References.scss'
```
File: [src\webparts\Birthdays\components\Birthdays.module.scss](src\webparts\Birthdays\components\Birthdays.module.scss)
### FN022002 Scss file import | Optional
Add scss file import
```scss
@import '~@fluentui/react/dist/sass/References.scss'
```
File: [src\controls\happybirthday\HappyBirthday.module.scss](src\controls\happybirthday\HappyBirthday.module.scss)
### FN022002 Scss file import | Optional
Add scss file import
```scss
@import '~@fluentui/react/dist/sass/References.scss'
```
File: [src\controls\happyBirthdayCard\HappyBirthdayCard.module.scss](src\controls\happyBirthdayCard\HappyBirthdayCard.module.scss)
### FN022002 Scss file import | Optional
Add scss file import
```scss
@import '~@fluentui/react/dist/sass/References.scss'
```
File: [src\webparts\Birthdays\components\Birthdays.module.scss](src\webparts\Birthdays\components\Birthdays.module.scss)
### FN002026 typescript | Required
Install SharePoint Framework dev dependency package typescript
Execute the following command:
```sh
npm i -DE typescript@4.5.5
```
File: [./package.json:30:3](./package.json)
### FN012020 tsconfig.json noImplicitAny | Required
Add noImplicitAny in tsconfig.json
```json
{
"compilerOptions": {
"noImplicitAny": true
}
}
```
File: [./tsconfig.json:3:22](./tsconfig.json)
### FN007001 serve.json schema | Required
Update serve.json schema URL
```json
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json"
}
```
File: [./config/serve.json:2:3](./config/serve.json)
### FN001033 tslib | Required
Install SharePoint Framework dependency package tslib
Execute the following command:
```sh
npm i -SE tslib@2.3.1
```
File: [./package.json:11:3](./package.json)
### FN002007 ajv | Required
Upgrade SharePoint Framework dev dependency package ajv
Execute the following command:
```sh
npm i -DE ajv@6.12.5
```
File: [./package.json:40:5](./package.json)
### FN002009 @microsoft/sp-tslint-rules | Required
Remove SharePoint Framework dev dependency package @microsoft/sp-tslint-rules
Execute the following command:
```sh
npm un -D @microsoft/sp-tslint-rules
```
File: [./package.json:35:5](./package.json)
### FN002013 @types/webpack-env | Required
Upgrade SharePoint Framework dev dependency package @types/webpack-env
Execute the following command:
```sh
npm i -DE @types/webpack-env@1.15.2
```
File: [./package.json:39:5](./package.json)
### FN002020 @microsoft/rush-stack-compiler-4.5 | Required
Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-4.5
Execute the following command:
```sh
npm i -DE @microsoft/rush-stack-compiler-4.5@0.2.2
```
File: [./package.json:30:3](./package.json)
### FN002021 @rushstack/eslint-config | Required
Install SharePoint Framework dev dependency package @rushstack/eslint-config
Execute the following command:
```sh
npm i -DE @rushstack/eslint-config@2.5.1
```
File: [./package.json:30:3](./package.json)
### FN002024 eslint | Required
Install SharePoint Framework dev dependency package eslint
Execute the following command:
```sh
npm i -DE eslint@8.7.0
```
File: [./package.json:30:3](./package.json)
### FN002025 eslint-plugin-react-hooks | Required
Install SharePoint Framework dev dependency package eslint-plugin-react-hooks
Execute the following command:
```sh
npm i -DE eslint-plugin-react-hooks@4.3.0
```
File: [./package.json:30:3](./package.json)
### FN012017 tsconfig.json extends property | Required
Update tsconfig.json extends property
```json
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json"
}
```
File: [./tsconfig.json:2:3](./tsconfig.json)
### FN015003 tslint.json | Required
Remove file tslint.json
Execute the following command:
```sh
rm "tslint.json"
```
File: [tslint.json](tslint.json)
### FN015008 .eslintrc.js | Required
Add file .eslintrc.js
Execute the following command:
```sh
cat > ".eslintrc.js" << EOF
require('@rushstack/eslint-config/patch/modern-module-resolution');
module.exports = {
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
parserOptions: { tsconfigRootDir: __dirname }
};
EOF
```
File: [.eslintrc.js](.eslintrc.js)
### FN023002 .gitignore '.heft' folder | Required
To .gitignore add the '.heft' folder
File: [./.gitignore](./.gitignore)
### 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 -D @microsoft/sp-tslint-rules
npm i -SE @microsoft/sp-core-library@1.16.1 @microsoft/sp-lodash-subset@1.16.1 @microsoft/sp-office-ui-fabric-core@1.16.1 @microsoft/sp-webpart-base@1.16.1 @microsoft/sp-property-pane@1.16.1 @microsoft/sp-adaptive-card-extension-base@1.16.1 react@17.0.1 react-dom@17.0.1 office-ui-fabric-react@7.199.1 tslib@2.3.1
npm i -DE @microsoft/eslint-plugin-spfx@1.16.1 @microsoft/eslint-config-spfx@1.16.1 @microsoft/sp-build-web@1.16.1 @microsoft/sp-module-interfaces@1.16.1 @types/react@17.0.45 @types/react-dom@17.0.17 typescript@4.5.5 ajv@6.12.5 @types/webpack-env@1.15.2 @microsoft/rush-stack-compiler-4.5@0.2.2 @rushstack/eslint-config@2.5.1 eslint@8.7.0 eslint-plugin-react-hooks@4.3.0
npm dedupe
cat > "config\sass.json" << EOF
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
}
EOF
rm "tslint.json"
cat > ".eslintrc.js" << EOF
require('@rushstack/eslint-config/patch/modern-module-resolution');
module.exports = {
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
parserOptions: { tsconfigRootDir: __dirname }
};
EOF
```
### Modify files
#### [./.yo-rc.json](./.yo-rc.json)
Update version in .yo-rc.json:
```json
{
"@microsoft/generator-sharepoint": {
"version": "1.16.1"
}
}
```
Update nodeVersion in .yo-rc.json:
```json
{
"@microsoft/generator-sharepoint": {
"nodeVersion": "14.18.1"
}
}
```
Update @microsoft/microsoft-graph-client SDK version in .yo-rc.json:
```json
{
"@microsoft/generator-sharepoint": {
"sdkVersions": {
"@microsoft/microsoft-graph-client": "3.0.2"
}
}
}
```
Update @microsoft/teams-js SDK version in .yo-rc.json:
```json
{
"@microsoft/generator-sharepoint": {
"sdkVersions": {
"@microsoft/teams-js": "2.4.1"
}
}
}
```
#### [./package.json](./package.json)
Update package.json engines.node property:
```json
{
"engines": {
"node": ">=16.13.0 <17.0.0"
}
}
```
#### [src\controls\happybirthday\HappyBirthday.module.scss](src\controls\happybirthday\HappyBirthday.module.scss)
Remove scss file import:
```scss
@import '~office-ui-fabric-react/dist/sass/References.scss'
```
Add scss file import:
```scss
@import '~@fluentui/react/dist/sass/References.scss'
```
#### [src\controls\happyBirthdayCard\HappyBirthdayCard.module.scss](src\controls\happyBirthdayCard\HappyBirthdayCard.module.scss)
Remove scss file import:
```scss
@import '~office-ui-fabric-react/dist/sass/References.scss'
```
Add scss file import:
```scss
@import '~@fluentui/react/dist/sass/References.scss'
```
#### [src\webparts\Birthdays\components\Birthdays.module.scss](src\webparts\Birthdays\components\Birthdays.module.scss)
Remove scss file import:
```scss
@import '~office-ui-fabric-react/dist/sass/References.scss'
```
Add scss file import:
```scss
@import '~@fluentui/react/dist/sass/References.scss'
```
#### [./tsconfig.json](./tsconfig.json)
Add noImplicitAny in tsconfig.json:
```json
{
"compilerOptions": {
"noImplicitAny": true
}
}
```
Update tsconfig.json extends property:
```json
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json"
}
```
#### [./config/serve.json](./config/serve.json)
Update serve.json schema URL:
```json
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json"
}
```
#### [./.gitignore](./.gitignore)
To .gitignore add the '.heft' folder:
```text
.heft
```