Pnpjs: Single Part App Page error on ClientSidePage.fromFile when created from new Templates/Apps dialog

[trey-miller]

Category

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

Version

Please specify what version of the library you are using: [ 1.3.3 ]

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

Expected / Desired Behavior / Question

To retrieve an instance of ClientSidePage from a single part app page created from the new Templates/Apps picker without receiving an error.

Observed Behavior

Receiving an error instead: TypeError: "control.data.emphasis is undefined"

Steps to Reproduce

1. Install an spfx web part that targets supportedHosts.SharePointFullPage
2. Click New > Page on the home page ribbon to get the Templates and Apps picker dialog.
3. Click the Apps tab and choose your app page web part.
4. Configure as normal and save/publish the page.
5. Try to access the page programmatically:

const pageFile = sp.web.getFileByServerRelativeUrl(`/sites/somewhere/url-to-single-part-app-page.aspx`);
const page = await ClientSidePage.fromFile(pageFile); 
// page would be a ClientSidePage instance, but instead there is an error:
// TypeError: "control.data.emphasis is undefined"

This appears to occur on this line: https://github.com/pnp/pnpjs/blob/9c3ae78e0958e985f7436b96c498af373d840ff6/packages/sp/src/clientsidepages.ts#L763

Additional Info

This is only a problem creating a new page directly as a single part app page; it works fine if you create a normal Site Page, add the web part, and then convert it to a Single Part App Page as described in the documentation: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/single-part-app-pages#changing-page-layout-using-javascript-in-browser-console

I believe the issue has to do with the web part never being part of a section. If I change the code in my bundle output directly to section.emphasis = (control.data.emphasis && control.data.emphasis.zoneEmphasis) || 0; the error does not occur.

However, with that fix, a new error occurs: TypeError: "this.data.position is undefined" at https://github.com/pnp/pnpjs/blob/9c3ae78e0958e985f7436b96c498af373d840ff6/packages/sp/src/clientsidepages.ts#L1143

Thank you!

[patrick-rodgers]

Thanks for reporting this issue, will have a look at getting this fixed.

[patrick-rodgers]

Wowsers, that was a pain to debug. Thank you for the detailed write-up, wouldn't have been able to work though it otherwise. Got a fix merged for this and it will be part of the next release on July 12 Friday. Thank you again for submitting such detail, really appreciated on my side 😀👍

[kavaghela]

Is this issue resolved in 1.3.10 version as I am still receiving this issue in that version?

const page = await ClientSidePage.fromFile(sp.web.getFileByServerRelativeUrl("/sites/spfx/SitePages/List-Form.aspx"));
console.log(page);

I am using above code to get page

[juliemturner]

Based on the PR it looks like this was in version 1.3.4.

If you are still experiencing issues, please start a new issue.