Skip to content

upgrade.md

Latest commit

 

History

History
949 lines (607 loc) · 18.2 KB

upgrade.md

File metadata and controls

949 lines (607 loc) · 18.2 KB

Upgrade project SPCSearch to v1.13.1

Date: 11/29/2021

Findings

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

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

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

File: ./package.json:16: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.13.1

File: ./package.json:18: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.13.1

File: ./package.json:17:5

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.13.1

File: ./package.json:36: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.13.1

File: ./package.json:38:5

FN002009 @microsoft/sp-tslint-rules | Required

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

Execute the following command:

npm i -DE @microsoft/sp-tslint-rules@1.13.1

File: ./package.json:37:5

FN006004 package-solution.json developer | Optional

In package-solution.json add developer section

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

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

FN010001 .yo-rc.json version | Recommended

Update version in .yo-rc.json

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

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

FN001008 react | Required

Upgrade SharePoint Framework dependency package react

Execute the following command:

npm i -SE react@16.13.1

File: ./package.json:29:5

FN001009 react-dom | Required

Upgrade SharePoint Framework dependency package react-dom

Execute the following command:

npm i -SE react-dom@16.13.1

File: ./package.json:30:5

FN001022 office-ui-fabric-react | Required

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

Execute the following command:

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

File: ./package.json:28:5

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

FN002015 @types/react | Required

Install SharePoint Framework dev dependency package @types/react

Execute the following command:

npm i -DE @types/react@16.9.51

File: ./package.json:35:3

FN002018 @microsoft/rush-stack-compiler-3.9 | Required

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

Execute the following command:

npm i -DE @microsoft/rush-stack-compiler-3.9@0.4.47

File: ./package.json:35:3

FN007002 serve.json initialPage | Required

Update serve.json initialPage URL

{
  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
}

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

FN007003 serve.json api | Required

From serve.json remove the api property



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


FN012017 tsconfig.json extends property | Required


Update tsconfig.json extends property


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


File: ./tsconfig.json:2:3


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:41: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:42: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:43:5


FN002016 @types/react-dom | Required


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


Execute the following command:


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


File: ./package.json:35:3


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


FN015006 .editorconfig | Required


Remove file .editorconfig


Execute the following command:


rm ".editorconfig"


File: .editorconfig


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


FN001005 @types/react | Required


Remove SharePoint Framework dependency package @types/react


Execute the following command:


npm un -S @types/react


File: ./package.json:25:5


FN001006 @types/react-dom | Required


Remove SharePoint Framework dependency package @types/react-dom


Execute the following command:


npm un -S @types/react-dom


File: ./package.json:26:5


FN001007 @types/webpack-env | Required


Remove SharePoint Framework dependency package @types/webpack-env


Execute the following command:


npm un -S @types/webpack-env


File: ./package.json:27:5


FN001010 @types/es6-promise | Required


Remove SharePoint Framework dependency package @types/es6-promise


Execute the following command:


npm un -S @types/es6-promise


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


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


FN012012 tsconfig.json include property | Required


Add to the tsconfig.json include property


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


File: ./tsconfig.json:31:3


FN020001 @types/react | Required


Add resolution for package @types/react


{
  "resolutions": {
    "@types/react": "16.8.8"
  }
}


File: ./package.json:33:5


FN021001 main | Required


Add package.json property


{
  "main": "lib/index.js"
}


File: ./package.json:1:1


FN022001 Scss file import | Required


Remove scss file import


@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'


File: src/components/SearchResultCard/SearchResultCard.module.scss


FN022001 Scss file import | Required


Remove scss file import


@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'


File: src/components/SearchResultCardCompact/SearchResultCardCompact.module.scss


FN022001 Scss file import | Required


Remove scss file import


@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'


File: src/webparts/pagedSearch/components/PagedSearch.module.scss


FN022001 Scss file import | Required


Remove scss file import


@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'


File: src/webparts/productSearch/components/ProductSearch.module.scss


FN022001 Scss file import | Required


Remove scss file import


@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'


File: src/webparts/spcSearch/components/SpcSearch.module.scss


FN022002 Scss file import | Optional


Add scss file import


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


File: src/components/SearchResultCard/SearchResultCard.module.scss


FN022002 Scss file import | Optional


Add scss file import


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


File: src/components/SearchResultCardCompact/SearchResultCardCompact.module.scss


FN022002 Scss file import | Optional


Add scss file import


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


File: src/webparts/pagedSearch/components/PagedSearch.module.scss


FN022002 Scss file import | Optional


Add scss file import


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


File: src/webparts/productSearch/components/ProductSearch.module.scss


FN022002 Scss file import | Optional


Add scss file import


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


File: src/webparts/spcSearch/components/SpcSearch.module.scss


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 -S @types/react @types/react-dom @types/webpack-env @types/es6-promise
npm un -D @microsoft/sp-webpart-workbench @types/chai @types/mocha
npm i -SE @microsoft/sp-core-library@1.13.1 @microsoft/sp-lodash-subset@1.13.1 @microsoft/sp-office-ui-fabric-core@1.13.1 @microsoft/sp-webpart-base@1.13.1 @microsoft/sp-property-pane@1.13.1 react@16.13.1 react-dom@16.13.1 office-ui-fabric-react@7.174.1
npm i -DE @microsoft/sp-build-web@1.13.1 @microsoft/sp-module-interfaces@1.13.1 @microsoft/sp-tslint-rules@1.13.1 @types/react@16.9.51 @microsoft/rush-stack-compiler-3.9@0.4.47 gulp@4.0.2 @types/react-dom@16.9.8 @types/webpack-env@1.13.1 @types/es6-promise@0.0.33
npm dedupe
rm "config/copy-assets.json"
rm ".editorconfig"


Modify files


./config/package-solution.json


In package-solution.json add developer section:


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


./.yo-rc.json


Update version in .yo-rc.json:


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


./config/serve.json


Update serve.json initialPage URL:


{
  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
}


From serve.json remove the api property:




./tsconfig.json


Update tsconfig.json extends property:


{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/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"
    ]
  }
}


Add to the tsconfig.json include property:


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


.vscode/launch.json


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




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


./.gitignore


To .gitignore add the 'release' folder:


release



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


./package.json


Remove package.json property:


{
  "engines": "undefined"
}


Add resolution for package @types/react:


{
  "resolutions": {
    "@types/react": "16.8.8"
  }
}


Add package.json property:


{
  "main": "lib/index.js"
}


src/components/SearchResultCard/SearchResultCard.module.scss


Remove scss file import:


@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'


Add scss file import:


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


src/components/SearchResultCardCompact/SearchResultCardCompact.module.scss


Remove scss file import:


@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'


Add scss file import:


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


src/webparts/pagedSearch/components/PagedSearch.module.scss


Remove scss file import:


@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'


Add scss file import:


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


src/webparts/productSearch/components/ProductSearch.module.scss


Remove scss file import:


@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'


Add scss file import:


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


src/webparts/spcSearch/components/SpcSearch.module.scss


Remove scss file import:


@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'


Add scss file import:


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