SPFx web part throwing error in SP2019

Question

I have created spfx solution by selecting option which will work in SP Online and SP 2019. I have tested this in SP Online which is working fine.

Now I have moved this .sppkg file to SP 2019 app catalog. While adding app to app catalog it is showing as below. It is getting content from SP Online.

In write-manifest.json file I have left the default values

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
  "cdnBasePath": "<!-- PATH TO CDN -->"
}

Now I have installed the app to app catalog then added web part to the page. I haven't modified the OOB web part which comes while creating the web part using yomen generator. I have selected React as framework for this.

But it is throwing below error after I have added web part to page

Is this because of the write-manifest.json file's cdnBasePath value? Package.json

{
  "name": "custom-solutions",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "~1.4.0",
    "@microsoft/sp-lodash-subset": "~1.4.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
    "@microsoft/sp-webpart-base": "~1.4.0",
    "@types/es6-promise": "0.0.33",
    "@types/react": "16.4.2",
    "@types/react-dom": "16.0.5",
    "@types/webpack-env": "1.13.1",
    "office-ui-fabric-core": "^10.1.0",
    "react": "16.3.2",
    "react-dom": "16.3.2"
  },
  "resolutions": {
    "@types/react": "16.4.2"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.4.1",
    "@microsoft/sp-module-interfaces": "~1.4.1",
    "@microsoft/sp-webpart-workbench": "~1.4.1",
    "gulp": "~3.9.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2"
  }
}

Answer 1

Looks like its buggy package.json created by the yeoman generator,

SP 2019 as mentioned supports version 1.4.0 of SPFx which is based on React 15.

Would suggest that you modify the package.json as below:

"dependencies": {
    "react": "15.6.2",
    "react-dom": "15.6.2",
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@microsoft/sp-core-library": "1.4.1",
    "@microsoft/sp-webpart-base": "1.4.1",
    "@microsoft/sp-lodash-subset": "1.4.1",
    "@microsoft/sp-office-ui-fabric-core": "1.4.1",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "@types/es6-promise": "0.0.33"
  },  
  "devDependencies": {
    "@microsoft/sp-build-web": "1.4.1",
    "@microsoft/sp-module-interfaces": "1.4.1",
    "@microsoft/sp-webpart-workbench": "1.4.1",
    "gulp": "~3.9.1",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/mocha": ">=2.2.33 <2.6.0",
    "ajv": "~5.2.2"
  }

and also, ensure that your tsconfig.json is as below:

{
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
    "types": [
      "es6-promise",
      "webpack-env"
    ],
    "lib": [
      "es5",
      "dom",
      "es2015.collection"
    ]
  }
}

After that, delete your node_modules folder and install the packages again using npm i and check. It should work both in SP 2019 and SPO as well since SPO is always backwards compatible.