Custom Client-side web part not added to a page about pnpjs HOT 6 CLOSED

What part is not working above? When you say same behavior, can you be more specific there are several things in the thread you linked. Thanks!

from pnpjs.

It is a custom web part - for the sake of simplicity I've created an OOB HelloWorld web part.

The web part is successfully found from the web part definitions and built with the code

helloWorldPoCPart = ClientSideWebpart.fromComponentDef(helloWorldPoCDef[0]);

However, when I add it to the page, it is rendered as a blank web part:
https://user-images.githubusercontent.com/23637375/36662564-aa582f8e-1ad6-11e8-8193-20ed1bead0c2.PNG

According to the discussions in the linked bug, I have modified the Component's ID without brackets. Note that I've tried both with the original definition (with brackets) and without brackets.

UPDATE 1: I've modified the ClientSidePageComponent object's Id property with toLowerCase() and it now appears. For now, I've implemented a method which fixes the Id of the web part

from pnpjs.

So the guid from your custom component definition contains capital letters, meaning the id is as well. When you make them lower-case it then works? Can you share the code that "fixes" the issue? I'd like to get this resolved in the library if possible.

from pnpjs.

Sure, it is quick and dirty code, but here it is:

`
// code within another method
someMethod(): void {
const partDefs: ClientSidePageComponent[] = await sp.web.getClientSideWebParts();
const helloWorldPoCDef: ClientSidePageComponent[] = partDefs.filter(c => c.Name === "HelloWorld");
let fixWebPart: ClientSidePageComponent = this.fixClientSideWebPart(helloWorldPoCDef[0]);
let helloWorldPoC: ClientSideWebpart = ClientSideWebpart.fromComponentDef(fixWebPart);
}

private fixClientSideWebPart(webpart: ClientSidePageComponent): ClientSidePageComponent {
let fixedWebPartDefinition: ClientSidePageComponent = webpart;
fixedWebPartDefinition.Id = webpart.Id.replace("{", "").replace("}", "").toLowerCase();
console.log("ID set: " + fixedWebPartDefinition.Id);
return fixedWebPartDefinition;
}
`
I was thinking to match the id of the ClientSidePageComponent object with the ClientSidePageComponent -> manifest object (needs JSON.parse though)

from pnpjs.

I can inside of the fromComponentDef method make these adjustments when I set the id. So perhaps that will be enough. Thanks for sharing the code.

from pnpjs.

This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.

from pnpjs.