I'm trying to render webparts dynamically at runtime. I have almost no experience with react, so this is where I'm stuck (I think).

Using pnp-js I can get the webpart definition and manifest like this:

const page = await ClientSidePage.fromFile(sp.web.getFileByServerRelativeUrl("/sites/zwirjomodern/SitePages/Home.aspx"));
const partDefs = await sp.web.getClientSideWebParts();
const partDef = partDefs.find(c => c.Id === "e377ea37-9047-43b9-8cdb-a761be2f8e09")
const part = ClientSideWebpart.fromComponentDef(partDef);
const manifest = JSON.parse(partDef.Manifest)
console.group("WebPartDefinition + Manifest")

Next I tried using _spComponentLoader.loadComponentById to load the actual component based on the manifest.id. I also was able to load @microsoft/sp-webpart-base

// @microsoft/sp-webpart-base
const Base = (await _spComponentLoader.loadComponentById('974a7777-0990-4136-8fa6-95d80114c2e0'))
const Component = (await _spComponentLoader.loadComponentById(manifest.id)).default

Next I tried rendering the component like this:

ReactDOM.render(React.createElement(Component, null), document.querySelector('.SPCanvas'))

However, sp-pages-assembly throws an error when rendering: TypeError: Cannot set property '_isDisposed' of undefined.

I believe the component creation is wrong. I know I'm not passing in any props for the component, but this seems to be unrelated - the error stems from this being undefined in sp-pages-assembly.

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.