Upgrade project spfx-walls-client-side-solution to v1.17.4

Date: 1/17/2024

Findings

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

File: ./package.json:17:5

FN001011 @microsoft/sp-dialog | Required

Upgrade SharePoint Framework dependency package @microsoft/sp-dialog

Execute the following command:

npm i -SE @microsoft/sp-dialog@1.17.4

File: ./package.json:18:5

FN001012 @microsoft/sp-application-base | Required

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

Execute the following command:

npm i -SE @microsoft/sp-application-base@1.17.4

File: ./package.json:16:5

FN001013 @microsoft/decorators | Required

Upgrade SharePoint Framework dependency package @microsoft/decorators

Execute the following command:

npm i -SE @microsoft/decorators@1.17.4

File: ./package.json:15: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.17.4

File: ./package.json:14: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.17.4

File: ./package.json:24: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.17.4

File: ./package.json:24: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.17.4

File: ./package.json:25: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.17.4

File: ./package.json:27:5

FN010001 .yo-rc.json version | Recommended

Update version in .yo-rc.json

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

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

FN002020 @microsoft/rush-stack-compiler-4.5 | Required

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

Execute the following command:

npm i -DE @microsoft/rush-stack-compiler-4.5@0.5.0

File: ./package.json:24:3

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

{
  "configurations": [
    {
      "type": "msedge"
    }
  ]
}

File: .vscode\launch.json:28:7

FN002024 eslint | Required

Install SharePoint Framework dev dependency package eslint

Execute the following command:

npm i -DE eslint@8.7.0

File: ./package.json:24:3

FN007002 serve.json initialPage | Required

Update serve.json initialPage URL

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

File: ./config/serve.json:1:1

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.9.1"
    }
  }
}

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

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

{
  "configurations": [
    {
      "url": "https://{tenantDomain}/_layouts/workbench.aspx"
    }
  ]
}

File: .vscode\launch.json:28:7

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

FN010008 .yo-rc.json nodeVersion | Recommended

Update nodeVersion in .yo-rc.json

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

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

FN021003 package.json engines.node | Required

Update package.json engines.node property

{
  "engines": {
    "node": ">=16.13.0 <17.0.0"
  }
}

File: ./package.json:7:5

FN002026 typescript | Required

Install SharePoint Framework dev dependency package typescript

Execute the following command:

npm i -DE typescript@4.5.5

File: ./package.json:24:3

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:33: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:26:5

FN002013 @types/webpack-env | Required

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

Execute the following command:

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

File: ./package.json:34: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@2.5.1

File: ./package.json:24:3

FN012017 tsconfig.json extends property | Required

Update tsconfig.json extends property

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

File: ./tsconfig.json:2: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');
export default {
  extends: ['@microsoft/eslint-config-spfx/lib/profiles/default'],
  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": "spfx-walls description"
      },
      "longDescription": {
        "default": "spfx-walls description"
      },
      "screenshotPaths": [],
      "videoUrl": "",
      "categories": []
    }
  }
}

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:28:5

FN014007 Local workbench in .vscode/launch.json | Recommended

In the .vscode/launch.json file, remove the local workbench launch configuration

File: .vscode\launch.json:11:7

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:30: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:31: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:32:5

FN002014 @types/es6-promise | Required

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

Execute the following command:

npm un -D @types/es6-promise

File: ./package.json:35:5

FN012013 tsconfig.json exclude property | Required

Remove tsconfig.json exclude property

{
  "exclude": []
}

File: ./tsconfig.json:35: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

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 @types/es6-promise
npm i -SE @microsoft/sp-core-library@1.17.4 @microsoft/sp-dialog@1.17.4 @microsoft/sp-application-base@1.17.4 @microsoft/decorators@1.17.4 @microsoft/sp-adaptive-card-extension-base@1.17.4 tslib@2.3.1
npm i -DE @microsoft/eslint-plugin-spfx@1.17.4 @microsoft/eslint-config-spfx@1.17.4 @microsoft/sp-build-web@1.17.4 @microsoft/sp-module-interfaces@1.17.4 @microsoft/rush-stack-compiler-4.5@0.5.0 eslint@8.7.0 typescript@4.5.5 ajv@6.12.5 @types/webpack-env@1.15.2 @rushstack/eslint-config@2.5.1 gulp@4.0.2
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');
export default {
  extends: ['@microsoft/eslint-config-spfx/lib/profiles/default'],
  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.17.4"
  }
}

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

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

Update nodeVersion in .yo-rc.json:

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

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

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

.vscode\launch.json

In the .vscode/launch.json file, update the type property for the hosted workbench launch configuration:

{
  "configurations": [
    {
      "type": "msedge"
    }
  ]
}

In the .vscode/launch.json file, update the url property for the hosted workbench launch configuration:

{
  "configurations": [
    {
      "url": "https://{tenantDomain}/_layouts/workbench.aspx"
    }
  ]
}

In the .vscode/launch.json file, remove the local workbench launch configuration:

./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"
}

./package.json

Update package.json engines.node property:

{
  "engines": {
    "node": ">=16.13.0 <17.0.0"
  }
}

Remove package.json property:

{
  "engines": "undefined"
}

./tsconfig.json

Add noImplicitAny in tsconfig.json:

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

Update tsconfig.json extends property:

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

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"
    ]
  }
}

./.gitignore

To .gitignore add the '.heft' folder:

.heft

To .gitignore add the 'release' folder:

release

./config/package-solution.json

In package-solution.json add metadata section:

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

./.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"
}

Files

upgrade-report.md

Latest commit

History

upgrade-report.md

File metadata and controls

Upgrade project spfx-walls-client-side-solution to v1.17.4

Findings

FN001001 @microsoft/sp-core-library | Required

FN001011 @microsoft/sp-dialog | Required

FN001012 @microsoft/sp-application-base | Required

FN001013 @microsoft/decorators | Required

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

FN002022 @microsoft/eslint-plugin-spfx | Required

FN002023 @microsoft/eslint-config-spfx | Required

FN002001 @microsoft/sp-build-web | Required

FN002002 @microsoft/sp-module-interfaces | Required

FN010001 .yo-rc.json version | Recommended

FN002020 @microsoft/rush-stack-compiler-4.5 | Required

FN014008 Hosted workbench type in .vscode/launch.json | Recommended

FN002024 eslint | Required

FN007002 serve.json initialPage | Required

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

FN014009 Hosted workbench URL in .vscode/launch.json | Recommended

FN015009 config\sass.json | Required

FN010008 .yo-rc.json nodeVersion | Recommended

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

FN021003 package.json engines.node | Required

FN002026 typescript | Required

FN012020 tsconfig.json noImplicitAny | Required

FN007001 serve.json schema | Required

FN001033 tslib | Required

FN002007 ajv | Required

FN002009 @microsoft/sp-tslint-rules | Required

FN002013 @types/webpack-env | Required

FN002021 @rushstack/eslint-config | Required

FN012017 tsconfig.json extends property | Required

FN015003 tslint.json | Required

FN015008 .eslintrc.js | Required

FN023002 .gitignore '.heft' folder | Required

FN006005 package-solution.json metadata | Required

FN002003 @microsoft/sp-webpart-workbench | Required

FN014007 Local workbench in .vscode/launch.json | Recommended

FN015007 config\copy-assets.json | Required

FN024001 Create .npmignore | Required

FN005002 deploy-azure-storage.json workingDir | Required

FN023001 .gitignore 'release' folder | Required

FN002004 gulp | Required

FN002005 @types/chai | Required

FN002006 @types/mocha | Required

FN002014 @types/es6-promise | Required

FN012013 tsconfig.json exclude property | Required

FN012018 tsconfig.json es2015.promise lib | Required

FN012019 tsconfig.json es6-promise types | Required

FN013002 gulpfile.js serve task | Required

FN019002 tslint.json extends | Required

FN021002 engines | Required

FN017001 Run npm dedupe | Optional

Summary

Execute script

Modify files