0

I am on SharePount on-premise 2016 with "September 2017 Public Update for SharePoint 2016" deployed and the configuration database is greater than 16.0.4588.1000. The site is running on https

I created a modern spfx web part which works in the the workbench and here is my package.json file

{
  "name": "manage-tasks",
  "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-webpart-base": "~1.1.0",
    "@microsoft/sp-lodash-subset": "~1.1.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0-0",
    "@types/webpack-env": "1.13.1",
    "@types/es6-promise": "0.0.33"
  },
  "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 would like to add the above web part in a classic page. So I run the web part in workbench and get the webpart code by clicking on webpart data -> classic page copy the web part code and save it in a .webpart file like this

<webParts>
  <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
    <metaData>
      <type name="Microsoft.SharePoint.WebPartPages.ClientSideWebPart,
        Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
      <importErrorMessage>Cannot Import WebPart</importErrorMessage>
    </metaData>
    <data>
      <properties>
        <property name="Title" type="string">ManageTask</property>
        <property name="Description" type="string">ManageTask description</property>
        <property name="IconUrl" type="string"></property>
        <property name="ClientSideWebPartId">92c93358-6cdd-4b06-89fc-b0b6f884e01d</property>
        <property name="ClientSideWebPartData" type="string">&lt;div data-sp-webpart="" data-sp-webpartdataversion="1.0" data-sp-webpartdata="{&amp;quot;id&amp;quot;:&amp;quot;92c93358-6cdd-4b06-89fc-b0b6f884e01d&amp;quot;,&amp;quot;instanceId&amp;quot;:&amp;quot;a7045474-6f25-442e-bc93-3335859b8cdf&amp;quot;,&amp;quot;title&amp;quot;:&amp;quot;ManageTask&amp;quot;,&amp;quot;description&amp;quot;:&amp;quot;ManageTask description&amp;quot;,&amp;quot;dataVersion&amp;quot;:&amp;quot;1.0&amp;quot;,&amp;quot;properties&amp;quot;:{&amp;quot;description&amp;quot;:&amp;quot;ManageTask&amp;quot;}}"&gt;&lt;div data-sp-componentid=""&gt;92c93358-6cdd-4b06-89fc-b0b6f884e01d&lt;/div&gt;&lt;div data-sp-htmlproperties=""&gt;&lt;/div&gt;&lt;/div&gt;</property>
      </properties>
    </data>
  </webPart>
</webParts>

The package is added and deployed in the apps catalog and I also upload the javascript assets and the json file to a document library and that URL is specified in the write-manifest.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
  "cdnBasePath": "https://url/SiteAssets/ManageTasks"
}

After manually uploading the .webpart file and adding it as a web part on a classic page I get the following error in the console

Failed to render client side web part. Id: [92c93358-6cdd-4b06-89fc-b0b6f884e01d], Manifest: [<NULL>], Error Details:: [Microsoft.SharePoint.ClientSideComponent.SPClientSideFrameworkException: Web Part 92c93358-6cdd-4b06-89fc-b0b6f884e01d failed to render as manifest is not found

   at Microsoft.SharePoint.WebPartPages.ClientSideWebPart.GetManifest[TManifest](Guid componentId, String& manifestJson)

   at Microsoft.SharePoint.WebPartPages.ClientSideWebPart.<>c__DisplayClass4.<Render>b__0()

   at Microsoft.SharePoint.ClientSideComponent.SPClientSideFrameworkReliabilityHelper.ExecuteInReliabilityMonitoredScope[TException](Action userCodeDelegate, SPReliabilityMonitor monitor, UInt32 expectedFailureTag, Action`1 customErrorHandlerDelegate, Boolean reThrow)] docsethomepage.aspx:695:29
Web Part framework is not loaded.

92c93358-6cdd-4b06-89fc-b0b6f884e01d.js manifest file has the following content

{"id":"92c93358-6cdd-4b06-89fc-b0b6f884e01d","alias":"ManageTaskWebPart","componentType":"WebPart","version":"0.0.1","manifestVersion":2,"requiresCustomScript":false,"preconfiguredEntries":[{"groupId":"5c03119e-3074-46fd-976b-c60198311f70","group":{"default":"Other"},"title":{"default":"ManageTask"},"description":{"default":"ManageTask description"},"officeFabricIconFontName":"Page","properties":{"description":"ManageTask"}}],"loaderConfig":{"entryModuleId":"manage-task-web-part","internalModuleBaseUrls":["https://url/SiteAssets/ManageTasks/"],"scriptResources":{"manage-task-web-part":{"type":"path","path":"manage-task-web-part_a16b19e3050bd28b04368aaaff93802c.js"},"ManageTaskWebPartStrings":{"defaultPath":"managetasks-managetaskwebpartstrings_en-us_536e65149b0acf4d52c0043073b9fc59.js","type":"localizedPath","paths":{}},"@microsoft/sp-core-library":{"type":"component","version":"1.1.0","id":"7263c7d0-1d6a-45ec-8d85-d4d1d234171b"},"@microsoft/sp-http":{"type":"component","version":"1.1.1","id":"c07208f0-ea3b-4c1a-9965-ac1b825211a6"},"@microsoft/sp-webpart-base":{"type":"component","version":"1.1.1","id":"974a7777-0990-4136-8fa6-95d80114c2e0"}}}}

In the above file internalModuleBaseUrls is successfully copied from write-manifest.json.

Please can anyone tell me what do I need to do to enable the SharePoint framework.

The question is updated to show the updated package files.

  • What option did you select when creating the webpart? It looks like you're trying to use a higher level library than is supported in 2016. 2016 supports SPFx 1.1. docs.microsoft.com/en-us/sharepoint/dev/spfx/… – Trevor Seward Apr 22 at 15:19
  • So yes, I had upgraded the the versions and to fix that I created a new project, selected 2016 and upwards and then copied my source files into this new project but I still end up running into this same issue. I can confirm that I am now using 1.1.0 – i.jk Apr 22 at 18:27
  • Can you edit your question to reflect the new files/settings/error(s)? – Trevor Seward Apr 22 at 18:41
  • @Trevor the question is updated! – i.jk Apr 22 at 19:54

Your Answer

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

Browse other questions tagged or ask your own question.