0

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. enter image description here

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 enter image description here

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"
  }
}
  • can you paste the package.json file ? SP 2019 supports only 1.4.1 version of SPFx – Gautam Sheth Jul 17 at 14:00
  • updated with package.json – Mihir Jul 17 at 14:29
  • @GautamSheth, 16.3.2 related to react framework right!! This will be an issue? – Mihir Jul 17 at 14:59
  • yes React 16 is the main issue here as well as other internal stuff. Should work with the below answer. – Gautam Sheth Jul 17 at 15:04
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.

  • I see that change you made in tsconfig.json file is "module": "esnext" to "module": "commonjs" and you have removed "moduleResolution": "node". – Mihir Jul 17 at 15:15
  • Can you tell me about these properties more!! – Mihir Jul 17 at 15:15
  • not an expert on these unfortunately :( I pasted the working older version from an old SPFx webpart and it looks like in the newer versions the properties have might which might not work in SP 2019. Is it working now at your end ? – Gautam Sheth Jul 17 at 15:20
  • Trying it.. i will let you know – Mihir Jul 17 at 15:21
  • After this change it is giving me below error when I do gulp serve: This site can’t provide a secure connection – Mihir Jul 17 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.