Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not able to setup SP2016/SP2019 onprem using @microsoft/sharepoint yoeman generator #3621

Closed
JEEVANJGA opened this issue Mar 18, 2019 · 17 comments

Comments

Projects
None yet
8 participants
@JEEVANJGA
Copy link

commented Mar 18, 2019

Category

  • Question
  • Typo
  • 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

This comment has been minimized.

Copy link
Collaborator

commented Mar 18, 2019

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

@patmill

This comment has been minimized.

Copy link
Contributor

commented Mar 18, 2019

Can you paste your package.json here?

@DaveHaasPowderSoftware

This comment has been minimized.

Copy link

commented Mar 18, 2019

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

This comment has been minimized.

Copy link
Author

commented Mar 19, 2019

Can you paste your package.json here?

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

@JEEVANJGA

This comment has been minimized.

Copy link
Author

commented Mar 19, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Mar 19, 2019

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

@DaveHaasPowderSoftware

This comment has been minimized.

Copy link

commented Mar 19, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Mar 20, 2019

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.

@DaveHaasPowderSoftware

This comment has been minimized.

Copy link

commented Mar 20, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Mar 29, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Mar 29, 2019

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 VesaJuvonen changed the title Not able to setup SP2016 onprem using @microsoft/sharepoint yoeman generator Not able to setup SP2016/SP2019 onprem using @microsoft/sharepoint yoeman generator Apr 1, 2019

@VesaJuvonen

This comment has been minimized.

Copy link
Contributor

commented Apr 1, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Apr 1, 2019

Thanks. gulp serve actually serves, now.

@patmill patmill referenced this issue Apr 4, 2019

Closed

SPFx 1.8 generator errors #3730

0 of 3 tasks complete
@dkorolev1

This comment has been minimized.

Copy link

commented Apr 5, 2019

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.

[SPLoaderError.loadComponentError]:
***Failed to load component "4ebc5fbd-4121-4558-8760-4dd7d6c15aef" (HelloWorldWebPart).
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

This comment has been minimized.

Copy link
Contributor

commented Apr 5, 2019

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

This comment has been minimized.

Copy link
Collaborator

commented Apr 23, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.