Kusi's SPFx Knowledgebase

Migrate SPFx 2016 to 2019

To migrate an SPFx package from 2016 to 2019, adjustments to certain files are necessary, after which only the package should be available instead of the old packages with the necessary JS files.

File Customizations

Make the red text changes to the 2016 solution and rebuild.

config/config.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "hello-world-web-part": {
      "entries""components": [
        {
          "entrypoint": "./lib/webparts/helloWorld/HelloWorldWebPart.js",
          "manifest": "./src/webparts/helloWorld/HelloWorldWebPart.manifest.json",
          "outputPath": "./dist/hello-world-web-part.js"
        }
      ]
    }
  },
  "externals": {},
  "localizedResources": {
    "HelloWorldWebPartStrings": "lib/webparts/helloWorld/loc/{locale}.js"
...

config/package-solution.json

...
"version": "1.0.0.0",
"includeClientSideAssets": true
...

config/write-manifest.json

...
"cdnBasePath": "<!-- PATH TO CDN -->"
...

.yo-rc.json

...
"environment": "onprem19"
...

package.json

...
"dependencies": {
    "react": "15.6.2",
    "react-dom": "15.6.2",
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@types/react-addons-shallow-compare": "0.14.17",
    "@types/react-addons-update": "0.14.14",
    "@types/react-addons-test-utils": "0.14.15",
    "@microsoft/sp-core-library": "~1.4.0",
    "@microsoft/sp-webpart-base": "~1.4.0",
    "@microsoft/sp-lodash-subset": "~1.4.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
    ...
  },
  "resolutions": {
    "@types/react": "15.6.6"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.4.1",
    "@microsoft/sp-module-interfaces": "~1.4.1",
    "@microsoft/sp-webpart-workbench": "~1.4.1",
...

tsconfig.json

...
    "module": "commonjs""esnext",
    "moduleResolution": "node",
...
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
...

gulpfile.js

...
const gulpSequence = require('gulp-sequence');
const del = require('del');

gulp.task('cleanup', function(){
     return del(['dist/**','lib/**','release/**','sharepoint/**','temp/**'], {force:true});
});
...
gulp.task('dist', gulpSequence('clean', 'cleanup', 'bundle', 'package-solution'));
...

README.md

## sp-2019
...