Pnpjs: TypeError: Cannot read property 'sectionFactor' of undefined when trying to parse modern article page

Created on 10 Dec 2018 · 8Comments · Source: pnp/pnpjs

Version

Please specify what version of the library you are using: 1.2.6

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

Expected / Desired Behavior / Question

Be able to create an instance of ClientSidePage from the contents of a newly created modern article page.

Observed Behavior

TypeError: Cannot read property 'sectionFactor' of undefined
    at CanvasColumn.fromHtml (/Users/user/tmp/pnpjs-page-issue/node_modules/@pnp/sp/dist/sp.es5.umd.js:6180:53)
    at /Users/user/tmp/pnpjs-page-issue/node_modules/@pnp/sp/dist/sp.es5.umd.js:5878:33
    at getBoundedDivMarkup (/Users/user/tmp/pnpjs-page-issue/node_modules/@pnp/sp/dist/sp.es5.umd.js:5706:33)
    at ClientSidePage.fromHtml (/Users/user/tmp/pnpjs-page-issue/node_modules/@pnp/sp/dist/sp.es5.umd.js:5868:13)
    at Object.<anonymous> (/Users/user/tmp/pnpjs-page-issue/index.js:4:18)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)

Steps to Reproduce

const sp = require('@pnp/sp');
let page = new sp.ClientSidePage(new sp.File('https://contoso.sharepoint.com'));
let page1 = page.fromHtml('<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>');
console.log(page1); // exception

code fixed bug

Source

waldekmastykarz

👍2

Most helpful comment

Gotcha,

So this should work for you after I merge the fix then:

import { sp, ClientSidePage } from "@pnp/sp";

// ... some code that gets you the page content
const pageContent = "<from magic>";
const file = sp.web.getFileByServerRelativePath("/sites/dev/SitePages/Testing_kVKF.aspx");
const page = await ClientSidePage.fromFile(file);

// will reset page content to whatever is parsed
page.fromHtml(pageContent);

// ... do stuff to the page 

page.save();

Also, interesting to note that if that content is coming from an already created page it means position data can be optional. Which isn't how things used to behave when I first wrote the code - so good to get that fixed regardless.

patrick-rodgers on 12 Dec 2018

👍4

All 8 comments

Thanks, will have a look and see what's what.

patrick-rodgers on 10 Dec 2018

👍1

Based on the code snippet you are trying to create a new page from an html fragment? It seems you have an empty column represented?

For creating a new page I'd recommend the code from the sample page. This will create an empty page where you can begin adding things.

import { sp } from "@pnp/sp";

let page = await sp.web.addClientSidePage(`MyFirstPage.aspx`);
page = page.fromHtml("<your html here>");
page.save();

Now, doing what I just did above gives me the error you are reporting (good I can see it) and the issue is that the position information is missing from the html snippet. We have defaults (and that is what the CSOM library is doing) but I am not sure that is valid html coming in? I don't have a good handle on what is really required in the html and what is not.

Either way, I will add code to handle this by skipping setting these values if the position data is missing which will leave the defaults in place.

patrick-rodgers on 11 Dec 2018

👍1

I'm trying to add a web part to a newly created article page. I'm retrieving page contents using REST (outside of PnPjs) and then passing it into the fromHtml method to create an instance of ClientSidePage to actually add the web part to the page and get the HTML to set in the column.

waldekmastykarz on 11 Dec 2018

Gotcha,

So this should work for you after I merge the fix then:

import { sp, ClientSidePage } from "@pnp/sp";

// ... some code that gets you the page content
const pageContent = "<from magic>";
const file = sp.web.getFileByServerRelativePath("/sites/dev/SitePages/Testing_kVKF.aspx");
const page = await ClientSidePage.fromFile(file);

// will reset page content to whatever is parsed
page.fromHtml(pageContent);

// ... do stuff to the page 

page.save();

patrick-rodgers on 12 Dec 2018

👍4

Thanks for looking into it!

waldekmastykarz on 12 Dec 2018

I am also facing this issue, which version of pnp should i use ?

harshdamaniahd on 1 Jan 2019

I am also facing this issue, which version of pnp should i use ?

I had the same issue and I replaced the sp.CientSidePage modules until the fix is released. My understanding is part of the 1.2.8 milestone that is due on 11-Jan-19.