Sp-dev-docs: Not able to setup SP2016/SP2019 onprem using @microsoft/sharepoint yoeman generator

[JEEVANJGA]

Category

• [x] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Using @microsoft/sharepoint yoeman generator, one should be able to create SP2016 onprem project using spfx with the generated node modules and other files.

Observed Behavior

After installing @microsoft/sharepoint yoeman generator, by running yo @microsoft/sharepoint and giving required answers to the prompts for setting up a sample 2016 onprem sharepoint project with react, a project is created with few warnings and following message :

added 1717 packages from 1678 contributors and audited 106412 packages in 1455.394s
found 617 vulnerabilities (249 low, 160 moderate, 203 high, 5 critical)

After running gulp trust-dev-cert,

I ran gulp serve, at this time the command execution is initiated and suddenly stopped with few errors.

Build target: DEBUG
[11:14:18] Using gulpfile ~\Jeevan Desktop\Sample\gulpfile.js
[11:14:18] Starting gulp
[11:14:18] Starting 'serve'...
[11:14:18] Starting subtask 'pre-copy'...
[11:14:18] Finished subtask 'pre-copy' after 94 ms
[11:14:18] Starting subtask 'copy-static-assets'...
[11:14:18] Starting subtask 'sass'...
[11:14:26] Finished subtask 'copy-static-assets' after 8.54 s
[11:14:26] Finished subtask 'sass' after 8.53 s
[11:14:26] Starting subtask 'tslint'...
[11:14:26] Starting subtask 'typescript'...
[11:14:26] [typescript] TypeScript version: 2.2.2
[11:14:30] Error - typescript - src\webparts\helloWorld\HelloWorldWebPart.ts(7,7): error TS2307: Cannot find module '@microsoft/sp-property-pane'.
[11:14:32] Warning - tslint - src\webparts\helloWorld\components\HelloWorld.tsx(16,23): error quotemark: " should be '
[11:14:32] Finished subtask 'tslint' after 5.42 s
[11:14:32] Error - 'typescript' sub task errored after 5.52 s "TypeScript error(s) occurred."
[11:14:32] 'serve' errored after 14 s
[11:14:32]
[11:14:32] ==================[ Finished ]==================
Warning - tslint - src\webparts\helloWorld\components\HelloWorld.tsx(16,23): error quotemark: "should be '
Error - typescript - src\webparts\helloWorld\HelloWorldWebPart.ts(7,7): error TS2307: Cannot find module '@microsoft/sp-property-pane'.
Error - 'typescript' sub task errored after 5.52 s "TypeScript error(s) occurred."
[11:14:33] Project sample version: 0.0.1
[11:14:33] Build tools version: 2.5.3
[11:14:33] Node version: v8.15.1
[11:14:33] Total duration: 25 s
[11:14:33] Task warnings: 1
[11:14:33] Task errors: 2

Steps to Reproduce

• npm install -g yo gulp
• npm i @microsoft/sharepoint
• yo @microsoft/sharepoint
  
  
  
  • answer prompts for SP2016 onprem webPart with react
  
  
• gulp trust-dev-cert
• gulp serve

Request :

Kindly please share steps to setup SP2016 onprem with React, without errors.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[patmill]

Can you paste your package.json here?

[chartnado-dave-haas]

According to the release notes for 1.8, the property pane functionality was moved from sp-webpart-base into sp-property-pane, however no '@microsoft/sp-property-pane' reference is included in the default package.json file (at least it's not in mine which was created by the generator). It will therefore not compile.

Not sure how to add the proper '@microsoft/sp-property-pane' package since using npm to try to install it results in what appears to be a react installation (I chose no react during the yo scaffolding for my test project for 2016 and beyond), which breaks damn near everything.

So, the default scaffolding is broken for 1.8 when trying to start with an on-prem 2016 bare bones web part.

[JEEVANJGA]

Can you paste your package.json here?

Package.json is the default one being generated by the generator.

[JEEVANJGA]

Check this :
https://sharepoint.stackexchange.com/questions/259570/steps-to-setup-sp2016-onprem-with-react-using-spfx/259580#259580

[JEEVANJGA]

It seems that from v1.7.1 and above doesn't support SP2016 onprem with react setup, though they are providing it in the generator as an option. Not sure about V1.7.0.

But, V1.6.0 worked for me. only problem is that all the functionalities are a bit old compared to the latest available features.

It would be great if support for SP2016 onprem with react is provided in the latest versions as well...

[patmill]

Ah, sorry. I see what happened. The code change to handle the property pane logic moving was (incorrectly) applied to the onPrem solution. While waiting for a fix, the easiest thing to do in order to get unblocked is to go to "helloworld.ts" and move imports from sp-property-pane back to sp-webpart-base. It will also have a tslint warning in the tsx file. Just replace the " with ' .

[chartnado-dave-haas]

In my case, that's been tried. I get a validation error when running gulp serve (during the write-manifests task):

Manifest validation error:

"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",

Data does not match any schemas from 'oneOf'
... (more validation errors)

Not sure why that's happening

[patmill]

Can you show your package.json? From what I can see, running the 2016 project, there is no "write-manifests" task listed when I run gulp serve.

[chartnado-dave-haas]

This is my package.json:

{
"name": "excel-file-viewer",
"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.1.0",
"@microsoft/sp-lodash-subset": "~1.1.0",
"@microsoft/sp-office-ui-fabric-core": "~1.4.0-0",
"@microsoft/sp-webpart-base": "~1.1.0",
"@types/es6-promise": "0.0.33",
"@types/webpack-env": "1.13.1"
},
"devDependencies": {
"@microsoft/sp-build-web": "~1.1.0",
"@microsoft/sp-module-interfaces": "~1.1.0",
"@microsoft/sp-webpart-workbench": "~1.1.0",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
}
}

I changed the web part to reference the property pane stuff back to sp-webpart-base

import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-webpart-base';

When you run gulp serve the 'write-manifests' taks is a subtask:

[22:48:46] Starting subtask 'write-manifests'...
[22:48:46] Error - [write-manifests] Manifest validation error (./src/webparts/excelFileViewer/ExcelFileViewerWebPart.manifest.json):
(#/) Data does not match any schemas from 'oneOf'
(#/) Missing required property: description
(#/) Missing required property: extensionType
(#/componentType) No enum match for: WebPart
(#/) Additional properties not allowed: supportedHosts
(#/) Missing required property: commands
About to exit with code: 0
Process terminated before summary could be written, possible error in async code not continuing!
Trying to exit with exit code 1

This happens as a result of changing the property pane references to use sp-webpart-base.

Again, my setup is:

sharepoint generator: 1.8.0
2016 and later webPart
no-react

[lhoff]

I am having the same issue as the OP, including the difficulty running gulp serve. I get this error (which I presume is the same one he is getting):

Error - [write-manifests] Manifest validation error (./src/webparts/myReactWebpart/MyReactWebpartWebPart.manifest.json):
(#/) Data does not match any schemas from 'oneOf'
(#/) Missing required property: description
(#/) Missing required property: extensionType
(#/componentType) No enum match for: WebPart
(#/) Additional properties not allowed: supportedHosts
(#/) Missing required property: commands

Really hope you guys can turn around an answer to our problems.

[patmill]

I'm having difficulty getting this to repro

OK, got it. My bad, I've been running gulp build not gulp serve. The bug is that the manifest.json file for the webpart has a line like this:

"supportedHosts": ["SharePointWebPart"],

Remove that line. We'll get this fixed in the generator as well.

[VesaJuvonen]

Just to recap the fixes needed for SP2016 and SP2019 with manual workarounds:

ERROR 1 - TS2307: Cannot find module '@microsoft/sp-property-pane

This is caused by referencing IPropertyPaneConfiguration and PropertyPaneTextField from wrong package. Update reference in the web part file for that import as follows:

import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
  } from '@microsoft/sp-webpart-base';

ERROR 2:

Error - [write-manifests] Manifest validation error (./src/webparts/wpsp2019/Wpsp2019WebPart.manifest.json):
(#/) Data does not match any schemas from 'oneOf'
(#/) Missing required property: description
(#/) Missing required property: extensionType
(#/componentType) No enum match for: WebPart
(#/) Additional properties not allowed: supportedHosts
(#/) Missing required property: items
(#/) Missing required property: rootComponentId

Caused by unknown attribute in the web part manifest file. Move to web part manifest file and remove following line completely:

"supportedHosts": ["SharePointWebPart"],

Fix for both issues will be provided in upcoming 1.8.1 version of the SPFx Yeomean generator. We will be closing this issue when fixes are available.

[lhoff]

Thanks. gulp serve actually serves, now.

[dkorolev1]

Perhaps this error is not actually related to this issue, but now after these changes my web part works well in a local workbench, but when I try to add it to the SharePoint page I can see the following error.

Original error: *Manifest not found for component id "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d" and version "16.7.0".

*INNERERROR:

*Manifest not found for component id "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d" and version "16.7.0".
*CALLSTACK:
Error
at t [as constructor] (http://f668857/_layouts/15/next/spclient/en-us/sp-pages-assembly.js?uniqueId=2g4QD:356:15766)
at new t (http://f668857/_layouts/15/next/spclient/en-us/sp-pages-assembly.js?uniqueId=2g4QD:807:22174)
at Function.e.buildErrorWithVerboseLog (http://f668857/_layouts/15/next/spclient/en-us/sp-pages-assembly.js?uniqueId=2g4QD:807:14408)
at Function.e.buildLoadComponentError (http://f668857/_layouts/15/next/spclient/en-us/sp-pages-assembly.js?uniqueId=2g4QD:807:10829)
at http://f668857/_layouts/15/next/spclient/en-us/sp-pages-assembly.js?uniqueId=2g4QD:807:62084

SharePoint 2019.

[patmill]

You are trying to use a newer version of React than is supported in 2019. You should be on React 15. Can you try updating your package.json to use

"react": "15.6.2",
"@types/react": "15.6.16",
"react-dom": "15.6.2",
"@types/react-dom": "15.5.6",

[msft-github-bot]

Closing issue as "answered". If you encounter similar issue(s), please open up a NEW issue. Thank you.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues