SharePoint Framework with KnockoutJS: Early Issues

If you’re making a start with SPFX using the knockout template, you might have found a few strange issues right out of the gate. Don’t worry – these are mostly due to bugs in the framework and Microsoft are working on them.

1: Incorrectly extends base class?

If you Yo up a new knockout project and try to build it – below I’ve created one called ‘Blank’ – you’ll notice an error that will prevent you transpiling:

[ts] Class 'BlankWebPart' incorrectly extends base class 'BaseClientSideWebPart<IBlankWebPartProps>'.
 Types have separate declarations of a private property '_description'.

ko-issue-1

Cause & Resolution

This is a known bug and is logged in github here. The simplest thing to do is to rename the _description variable in your WebPart.ts file to something else, like _desc. It should be renamed in 3 places and then the project will build. Apparently this will be fixed in the next drop.

2: Issues Using Custom Properties within SharePoint Workbench

When you’ve done some work on your web part and you want to work with it in a SharePoint context – perhaps to work with list data, or search api’s for instance – you’ll need to follow the steps to get your dev tenant setup. You’ll find them here: aka.ms/spfx-setup-tenant. However, when you add even you Hello World web part to the workbench in SharePoint, you’ll see issues relating to any custom properties you’ve got:

Cannot read property 'description' of undefined

wp-prop-error

Cause & Resolution

Unfortunately so far as I can tell there’s not an easy way to work around this issue currently, other than to strip out your custom properties. If anyone finds one – please let me know. It seems to be a bug, and is logged here. I’ll update this post when it’s fixed.

 3: Web Part Disappears when in SharePoint Workbench

This is a strange one and seems to be linked to the clearing of the loading spinner. It only seems to affect web parts using the Knockout framework, however. When running your web part in the SharePoint workbench, you might find that the page is just blank, and your web part container is empty.

Cause & Resolution

During the life cycle, when the _internalFirstTimeRender method is called in the framework code, it runs this.context.statusRenderer.clearLoadingIndicator(this.domElement) – which is supposed to just clear out the loading spinner. However, it seems to clean all of our markup from the DOM.

Again, no resolution currently – but i’ve logged the bug here, and it seems to be a known issue with framework. Preview, remember 🙂

 

…Hopefully just knowing that these are bugs and you’re not (necessarily) doing something nutty will help your sanity.

[Update 17:10:2016] – Workarounds

Big thanks to @PatMill_MSFT for the workaround supplied on GitHub – means we can get going while a more permanent fix is happening in the background. The issues linked above have been updated with comments if you’re interested. Essentially, it relates to the init code being called too early in the lifecycle – so the workaround is to call it later. See the Gist below for the code…

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

About davros85

SharePoint / Azure Architect & Developer - Creator of ProvisionPoint, a site provisioning and change management solution for SharePoint Online