Pnpjs: Not able to view client side components using PnP Posh after page creation

[wobba]

Category

• [ ] Enhancement
• [x] Bug
• [ ] Question
• [ ] Documentation gap/issue

Version

Please specify what version of the library you are using: [1.2.10-5]

Please specify what version(s) of SharePoint you are targeting: [SPO]

Observed Behavior

When adding a part to a page with for example page.addSection().addControl(new ClientSideText("foo")); and then trying to list components using Get-PnPClientSideComponent I get the following error.

Unrecognized Guid format

When I edit the page in SPO and save, it sets the rights values and PnP PowerShell works again.

[patrick-rodgers]

Any idea what value gets updated after save and then works in PS?

[wobba]

The issue is with the Text editor component. Here is CanvasContent1 content after .js update, and after page edit and save which solves it.

Before

<div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;addedFromPersistedData&quot;&#58;false,&quot;anchorComponentId&quot;&#58;&quot;&quot;,&quot;controlType&quot;&#58;4,&quot;displayMode&quot;&#58;2,&quot;editorType&quot;&#58;&quot;CKEditor&quot;,&quot;emphasis&quot;&#58;&#123;&#125;,&quot;id&quot;&#58;&quot;&quot;,&quot;position&quot;&#58;&#123;&quot;controlIndex&quot;&#58;1,&quot;layoutIndex&quot;&#58;1,&quot;sectionFactor&quot;&#58;12,&quot;sectionIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;1&#125;&#125;"><div data-sp-rte=""><p><div>

<p>Foo</p>



</div></p></div></div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;controlType&quot;&#58;0,&quot;pageSettingsSlice&quot;&#58;&#123;&quot;isDefaultDescription&quot;&#58;true,&quot;isDefaultThumbnail&quot;&#58;true&#125;&#125;"></div></div>

After

<div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;addedFromPersistedData&quot;&#58;true,&quot;anchorComponentId&quot;&#58;&quot;9ae4da22-932c-4a3d-b00b-405c992c111f&quot;,&quot;controlType&quot;&#58;4,&quot;displayMode&quot;&#58;2,&quot;editorType&quot;&#58;&quot;CKEditor&quot;,&quot;emphasis&quot;&#58;&#123;&#125;,&quot;id&quot;&#58;&quot;9ae4da22-932c-4a3d-b00b-405c992c111f&quot;,&quot;position&quot;&#58;&#123;&quot;controlIndex&quot;&#58;1,&quot;layoutIndex&quot;&#58;1,&quot;sectionFactor&quot;&#58;12,&quot;sectionIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;1&#125;&#125;"><div data-sp-rte=""><p>&#160;</p>

<div>
<p>Foo</p>
</div>

<p>&#160;</p>
</div></div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;controlType&quot;&#58;0,&quot;pageSettingsSlice&quot;&#58;&#123;&quot;isDefaultDescription&quot;&#58;true,&quot;isDefaultThumbnail&quot;&#58;true&#125;&#125;"></div></div>

Seems anchorComponentId is blank and is getting a guid, as well as a later id property.

[patrick-rodgers]

Thanks, have updated code to set id and anchorComponentId when creating a new control. From what I see testing it looks like they are always the same (which may be wrong, but I haven't figured a way to get back data where they are different). Will be included in upcoming release as well as next beta.

[patrick-rodgers]

Just published a new beta, v1.3.1-1, which contains the updates mentioned in this issue. Please give it a try if you have time and let us know if you see any further issues. Thanks!

[wobba]

I cannot properly test it as
const page = await this._web.addClientSidePage('Page-1.aspx');
is throwing an error with 1.3.1-1. Works fine with 1.2.10-5.

I'm running this inside of Word as an add-in which uses IE11 - and using sp/polyfills.

{"description":"Error making HttpClient request in queryable [404] ::> {\"odata.error\":{\"code\":\"-1, Microsoft.SharePoint.Client.ResourceNotFoundException\",\"message\":{\"lang\":\"en-US\",\"value\":\"Cannot find resource for the request _api.\"}}}","response":{"type":"default","status":404,"ok":false,"statusText":"","headers":{"map":{"cache-control":"private, max-age=0","content-type":"application/json;odata=minimalmetadata;streaming=true;charset=utf-8","expires":"Mon, 04 Mar 2019 08:15:56 GMT","last-modified":"Tue, 19 Mar 2019 07:15:56 GMT","sprequestguid":"b56fca9e-d0c3-8000-e2ad-e45479370eae"}},"url":"","_bodyInit":{},"_bodyBlob":{}},"status":404,"statusText":"","isHttpRequestError":true,"stack":"Error: Error making HttpClient request in queryable [404] ::> {\"odata.error\":{\"code\":\"-1, Microsoft.SharePoint.Client.ResourceNotFoundException\",\"message\":{\"lang\":\"en-US\",\"value\":\"Cannot find resource for the request _api.\"}}}\n at Anonymous function (eval code:299:9)\n at s (eval code:1:13781)\n at Anonymous function (eval code:1:13928)\n at a (eval code:1:17927)"}

[patrick-rodgers]

How are you including it? IE11 wouldn't support await so you would want to use the es5 lib?

Nevermind that, I think this may have been related to #565. Can you retest with latest beta?

[wobba]

1.3.1-2 works fine :)