honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-02-19 11:26:13 +00:00
Code Issues Packages Projects Releases Wiki Activity
sp-dev-fx-webparts/samples/react-accordion/spfx.upgrade.md
SandeepPS1299 4f32654471 build: upgrade to SPFx 1.20.0
2024-10-10 22:05:05 +05:30

21 KiB
Raw Blame History

Upgrade project react-accordion-client-side-solution to v1.20.0

Date: 10/10/2024

Findings

Following is the list of steps required to upgrade your project to SharePoint Framework version 1.20.0. 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:

npm i -SE @microsoft/sp-core-library@1.20.0

File: ./package.json:15:5

FN001002 @microsoft/sp-lodash-subset | Required

Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset

Execute the following command:

npm i -SE @microsoft/sp-lodash-subset@1.20.0

File: ./package.json:16:5

FN001003 @microsoft/sp-office-ui-fabric-core | Required

Upgrade SharePoint Framework dependency package @microsoft/sp-office-ui-fabric-core

Execute the following command:

npm i -SE @microsoft/sp-office-ui-fabric-core@1.20.0

File: ./package.json:17:5

FN001004 @microsoft/sp-webpart-base | Required

Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base

Execute the following command:

npm i -SE @microsoft/sp-webpart-base@1.20.0

File: ./package.json:19:5

FN001021 @microsoft/sp-property-pane | Required

Upgrade SharePoint Framework dependency package @microsoft/sp-property-pane

Execute the following command:

npm i -SE @microsoft/sp-property-pane@1.20.0

File: ./package.json:18:5

FN001034 @microsoft/sp-adaptive-card-extension-base | Optional

Install SharePoint Framework dependency package @microsoft/sp-adaptive-card-extension-base

Execute the following command:

npm i -SE @microsoft/sp-adaptive-card-extension-base@1.20.0

File: ./package.json:14:3

FN002001 @microsoft/sp-build-web | Required

Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web

Execute the following command:

npm i -DE @microsoft/sp-build-web@1.20.2

File: ./package.json:30:5

FN002002 @microsoft/sp-module-interfaces | Required

Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces

Execute the following command:

npm i -DE @microsoft/sp-module-interfaces@1.20.2

File: ./package.json:31:5

FN002021 @rushstack/eslint-config | Required

Install SharePoint Framework dev dependency package @rushstack/eslint-config

Execute the following command:

npm i -DE @rushstack/eslint-config@4.0.1

File: ./package.json:28:3

FN002024 eslint | Required

Install SharePoint Framework dev dependency package eslint

Execute the following command:

npm i -DE eslint@8.57.0

File: ./package.json:28:3

FN002022 @microsoft/eslint-plugin-spfx | Required

Install SharePoint Framework dev dependency package @microsoft/eslint-plugin-spfx

Execute the following command:

npm i -DE @microsoft/eslint-plugin-spfx@1.20.2

File: ./package.json:28:3

FN002023 @microsoft/eslint-config-spfx | Required

Install SharePoint Framework dev dependency package @microsoft/eslint-config-spfx

Execute the following command:

npm i -DE @microsoft/eslint-config-spfx@1.20.2

File: ./package.json:28:3

FN010001 .yo-rc.json version | Recommended

Update version in .yo-rc.json

{
  "@microsoft/generator-sharepoint": {
    "version": "1.20.0"
  }
}

File: ./.yo-rc.json:6:5

FN010010 .yo-rc.json @microsoft/teams-js SDK version | Recommended

Update @microsoft/teams-js SDK version in .yo-rc.json

{
  "@microsoft/generator-sharepoint": {
    "sdkVersions": {
      "@microsoft/teams-js": "2.24.0"
    }
  }
}

File: ./.yo-rc.json:2:3

FN001035 @fluentui/react | Required

Install SharePoint Framework dependency package @fluentui/react

Execute the following command:

npm i -SE @fluentui/react@8.106.4

File: ./package.json:14:3

FN002026 typescript | Required

Install SharePoint Framework dev dependency package typescript

Execute the following command:

npm i -DE typescript@4.7.4

File: ./package.json:28:3

FN002028 @microsoft/rush-stack-compiler-4.7 | Required

Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-4.7

Execute the following command:

npm i -DE @microsoft/rush-stack-compiler-4.7@0.1.0

File: ./package.json:28:3

FN012017 tsconfig.json extends property | Required

Update tsconfig.json extends property

{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json"
}

File: ./tsconfig.json:2:3

FN021003 package.json engines.node | Required

Update package.json engines.node property

{
  "engines": {
    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
  }
}

File: ./package.json:7:5

FN007002 serve.json initialPage | Required

Update serve.json initialPage URL

{
  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
}

File: ./config/serve.json:5:3

FN015009 config\sass.json | Required

Add file config\sass.json

Execute the following command:

cat > "config\sass.json" << EOF 
{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
}
EOF

File: config\sass.json

FN001008 react | Required

Upgrade SharePoint Framework dependency package react

Execute the following command:

npm i -SE react@17.0.1

File: ./package.json:21:5

FN001009 react-dom | Required

Upgrade SharePoint Framework dependency package react-dom

Execute the following command:

npm i -SE react-dom@17.0.1

File: ./package.json:23:5

FN001022 office-ui-fabric-react | Required

Install SharePoint Framework dependency package office-ui-fabric-react

Execute the following command:

npm i -SE office-ui-fabric-react@7.199.1

File: ./package.json:14:3

FN002015 @types/react | Required

Install SharePoint Framework dev dependency package @types/react

Execute the following command:

npm i -DE @types/react@17.0.45

File: ./package.json:28:3

FN002016 @types/react-dom | Required

Install SharePoint Framework dev dependency package @types/react-dom

Execute the following command:

npm i -DE @types/react-dom@17.0.17

File: ./package.json:28:3

FN010008 .yo-rc.json nodeVersion | Recommended

Update nodeVersion in .yo-rc.json

{
  "@microsoft/generator-sharepoint": {
    "nodeVersion": "20.16.0"
  }
}

File: ./.yo-rc.json:2:38

FN010009 .yo-rc.json @microsoft/microsoft-graph-client SDK version | Recommended

Update @microsoft/microsoft-graph-client SDK version in .yo-rc.json

{
  "@microsoft/generator-sharepoint": {
    "sdkVersions": {
      "@microsoft/microsoft-graph-client": "3.0.2"
    }
  }
}

File: ./.yo-rc.json:2:3

FN022001 Scss file import | Required

Remove scss file import

@import '~office-ui-fabric-react/dist/sass/References.scss'

File: src\webparts\reactAccordion\components\ReactAccordion.module.scss

FN022002 Scss file import | Optional

Add scss file import

@import '~@fluentui/react/dist/sass/References.scss'

File: src\webparts\reactAccordion\components\ReactAccordion.module.scss

FN012020 tsconfig.json noImplicitAny | Required

Add noImplicitAny in tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

File: ./tsconfig.json:3:22

FN007001 serve.json schema | Required

Update serve.json schema URL

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json"
}

File: ./config/serve.json:2:3

FN001033 tslib | Required

Install SharePoint Framework dependency package tslib

Execute the following command:

npm i -SE tslib@2.3.1

File: ./package.json:14:3

FN002007 ajv | Required

Upgrade SharePoint Framework dev dependency package ajv

Execute the following command:

npm i -DE ajv@6.12.5

File: ./package.json:36:5

FN002009 @microsoft/sp-tslint-rules | Required

Remove SharePoint Framework dev dependency package @microsoft/sp-tslint-rules

Execute the following command:

npm un -D @microsoft/sp-tslint-rules

File: ./package.json:32:5

FN002013 @types/webpack-env | Required

Install SharePoint Framework dev dependency package @types/webpack-env

Execute the following command:

npm i -DE @types/webpack-env@1.15.2

File: ./package.json:28:3

FN002025 eslint-plugin-react-hooks | Required

Install SharePoint Framework dev dependency package eslint-plugin-react-hooks

Execute the following command:

npm i -DE eslint-plugin-react-hooks@4.3.0

File: ./package.json:28:3

FN006004 package-solution.json developer | Optional

In package-solution.json add developer section

{
  "solution": {
    "developer": {
      "name": "",
      "privacyUrl": "",
      "termsOfUseUrl": "",
      "websiteUrl": "",
      "mpnId": "Undefined-1.15.0"
    }
  }
}

File: ./config/package-solution.json:3:3

FN015003 tslint.json | Required

Remove file tslint.json

Execute the following command:

rm "tslint.json"

File: tslint.json

FN015008 .eslintrc.js | Required

Add file .eslintrc.js

Execute the following command:

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

FN023002 .gitignore '.heft' folder | Required

To .gitignore add the '.heft' folder

File: ./.gitignore

FN006005 package-solution.json metadata | Required

In package-solution.json add metadata section

{
  "solution": {
    "metadata": {
      "shortDescription": {
        "default": "react-accordion description"
      },
      "longDescription": {
        "default": "react-accordion description"
      },
      "screenshotPaths": [],
      "videoUrl": "",
      "categories": []
    }
  }
}

File: ./config/package-solution.json:3:3

FN006006 package-solution.json features | Required

In package-solution.json add features for components

{
  "solution": {
    "features": [
      {
        "title": "react-accordion ReactAccordionWebPart Feature",
        "description": "The feature that activates ReactAccordionWebPart from the react-accordion solution.",
        "id": "97a28c00-64ee-4ec7-b373-723e39069a96",
        "version": "2.3.0.0",
        "componentIds": [
          "97a28c00-64ee-4ec7-b373-723e39069a96"
        ]
      }
    ]
  }
}

File: ./config/package-solution.json:3:3

FN002003 @microsoft/sp-webpart-workbench | Required

Remove SharePoint Framework dev dependency package @microsoft/sp-webpart-workbench

Execute the following command:

npm un -D @microsoft/sp-webpart-workbench

File: ./package.json:33:5

FN007003 serve.json api | Required

From serve.json remove the api property

File: ./config/serve.json:6:3

FN015007 config\copy-assets.json | Required

Remove file config\copy-assets.json

Execute the following command:

rm "config\copy-assets.json"

File: config\copy-assets.json

FN024001 Create .npmignore | Required

Create the .npmignore file

File: ./.npmignore

FN005002 deploy-azure-storage.json workingDir | Required

Update deploy-azure-storage.json workingDir

{
  "workingDir": "./release/assets/"
}

File: ./config/deploy-azure-storage.json:3:3

FN023001 .gitignore 'release' folder | Required

To .gitignore add the 'release' folder

File: ./.gitignore

FN002004 gulp | Required

Upgrade SharePoint Framework dev dependency package gulp

Execute the following command:

npm i -DE gulp@4.0.2

File: ./package.json:37:5

FN002005 @types/chai | Required

Remove SharePoint Framework dev dependency package @types/chai

Execute the following command:

npm un -D @types/chai

File: ./package.json:34:5

FN002006 @types/mocha | Required

Remove SharePoint Framework dev dependency package @types/mocha

Execute the following command:

npm un -D @types/mocha

File: ./package.json:35:5

FN012013 tsconfig.json exclude property | Required

Remove tsconfig.json exclude property

{
  "exclude": []
}

File: ./tsconfig.json:34:3

FN012018 tsconfig.json es2015.promise lib | Required

Add es2015.promise lib in tsconfig.json

{
  "compilerOptions": {
    "lib": [
      "es2015.promise"
    ]
  }
}

File: ./tsconfig.json:25:5

FN012019 tsconfig.json es6-promise types | Required

Remove es6-promise type in tsconfig.json

{
  "compilerOptions": {
    "types": [
      "es6-promise"
    ]
  }
}

File: ./tsconfig.json:22:7

FN013002 gulpfile.js serve task | Required

Before 'build.initialize(require('gulp'));' add the serve task

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

File: ./gulpfile.js

FN019002 tslint.json extends | Required

Update tslint.json extends property

{
  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json"
}

File: ./tslint.json:2:3

FN021002 engines | Required

Remove package.json property

{
  "engines": "undefined"
}

File: ./package.json:6:3

FN002014 @types/es6-promise | Required

Install SharePoint Framework dev dependency package @types/es6-promise

Execute the following command:

npm i -DE @types/es6-promise@0.0.33

File: ./package.json:28:3

FN012012 tsconfig.json include property | Required

Add to the tsconfig.json include property

{
  "include": [
    "src/**/*.tsx"
  ]
}

File: ./tsconfig.json:31:3

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:

npm dedupe

File: ./package.json

Summary

Execute script

npm un -D @microsoft/sp-tslint-rules @microsoft/sp-webpart-workbench @types/chai @types/mocha
npm i -SE @microsoft/sp-core-library@1.20.0 @microsoft/sp-lodash-subset@1.20.0 @microsoft/sp-office-ui-fabric-core@1.20.0 @microsoft/sp-webpart-base@1.20.0 @microsoft/sp-property-pane@1.20.0 @microsoft/sp-adaptive-card-extension-base@1.20.0 @fluentui/react@8.106.4 react@17.0.1 react-dom@17.0.1 office-ui-fabric-react@7.199.1 tslib@2.3.1
npm i -DE @microsoft/sp-build-web@1.20.2 @microsoft/sp-module-interfaces@1.20.2 @rushstack/eslint-config@4.0.1 eslint@8.57.0 @microsoft/eslint-plugin-spfx@1.20.2 @microsoft/eslint-config-spfx@1.20.2 typescript@4.7.4 @microsoft/rush-stack-compiler-4.7@0.1.0 @types/react@17.0.45 @types/react-dom@17.0.17 ajv@6.12.5 @types/webpack-env@1.15.2 eslint-plugin-react-hooks@4.3.0 gulp@4.0.2 @types/es6-promise@0.0.33
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
rm "config\copy-assets.json"

Modify files

./.yo-rc.json

Update version in .yo-rc.json:

{
  "@microsoft/generator-sharepoint": {
    "version": "1.20.0"
  }
}

Update @microsoft/teams-js SDK version in .yo-rc.json:

{
  "@microsoft/generator-sharepoint": {
    "sdkVersions": {
      "@microsoft/teams-js": "2.24.0"
    }
  }
}

Update nodeVersion in .yo-rc.json:

{
  "@microsoft/generator-sharepoint": {
    "nodeVersion": "20.16.0"
  }
}

Update @microsoft/microsoft-graph-client SDK version in .yo-rc.json:

{
  "@microsoft/generator-sharepoint": {
    "sdkVersions": {
      "@microsoft/microsoft-graph-client": "3.0.2"
    }
  }
}

./tsconfig.json

Update tsconfig.json extends property:

{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json"
}

Add noImplicitAny in tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

Remove tsconfig.json exclude property:

{
  "exclude": []
}

Add es2015.promise lib in tsconfig.json:

{
  "compilerOptions": {
    "lib": [
      "es2015.promise"
    ]
  }
}

Remove es6-promise type in tsconfig.json:

{
  "compilerOptions": {
    "types": [
      "es6-promise"
    ]
  }
}

Add to the tsconfig.json include property:

{
  "include": [
    "src/**/*.tsx"
  ]
}

./package.json

Update package.json engines.node property:

{
  "engines": {
    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
  }
}

Remove package.json property:

{
  "engines": "undefined"
}

./config/serve.json

Update serve.json initialPage URL:

{
  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
}

Update serve.json schema URL:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json"
}

From serve.json remove the api property:

src\webparts\reactAccordion\components\ReactAccordion.module.scss

Remove scss file import:

@import '~office-ui-fabric-react/dist/sass/References.scss'

Add scss file import:

@import '~@fluentui/react/dist/sass/References.scss'

./config/package-solution.json

In package-solution.json add developer section:

{
  "solution": {
    "developer": {
      "name": "",
      "privacyUrl": "",
      "termsOfUseUrl": "",
      "websiteUrl": "",
      "mpnId": "Undefined-1.15.0"
    }
  }
}

In package-solution.json add metadata section:

{
  "solution": {
    "metadata": {
      "shortDescription": {
        "default": "react-accordion description"
      },
      "longDescription": {
        "default": "react-accordion description"
      },
      "screenshotPaths": [],
      "videoUrl": "",
      "categories": []
    }
  }
}

In package-solution.json add features for components:

{
  "solution": {
    "features": [
      {
        "title": "react-accordion ReactAccordionWebPart Feature",
        "description": "The feature that activates ReactAccordionWebPart from the react-accordion solution.",
        "id": "97a28c00-64ee-4ec7-b373-723e39069a96",
        "version": "2.3.0.0",
        "componentIds": [
          "97a28c00-64ee-4ec7-b373-723e39069a96"
        ]
      }
    ]
  }
}

./.gitignore

To .gitignore add the '.heft' folder:

.heft

To .gitignore add the 'release' folder:

release

./.npmignore

Create the .npmignore file:

!dist
config

gulpfile.js

release
src
temp

tsconfig.json
tslint.json

*.log

.yo-rc.json
.vscode

./config/deploy-azure-storage.json

Update deploy-azure-storage.json workingDir:

{
  "workingDir": "./release/assets/"
}

./gulpfile.js

Before 'build.initialize(require('gulp'));' add the serve task:

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

./tslint.json

Update tslint.json extends property:

{
  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json"
}