SharePoint Framework webpart: add Handlerbars helper

%3CLINGO-SUB%20id%3D%22lingo-sub-692826%22%20slang%3D%22en-US%22%3ESharePoint%20Framework%20webpart%3A%20add%20Handlerbars%20helper%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-692826%22%20slang%3D%22en-US%22%3E%3CP%3EI've%20created%20a%20sharepoint%20framework%20webpart%20from%20the%20pnp%20spfx%20yo%20template%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20want%20to%20add%20a%20Handlerbars%20helper%20so%20I%20can%20have%20an%20if%20statement%20in%20my%20handlerbar%20template%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhen%20I%20add%20into%20the%20render%20method%20something%20like%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3EHandlebars%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EregisterHelper%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'check'%3C%2FSPAN%3E%3CSPAN%3E%2C%20(%3C%2FSPAN%3E%3CSPAN%3Enode%3C%2FSPAN%3E%3CSPAN%3E)%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3Ereturn%3C%2FSPAN%3E%20%3CSPAN%3Enode%3C%2FSPAN%3E%3CSPAN%3E!%3D%3D%3C%2FSPAN%3E%3CSPAN%3Enull%3C%2FSPAN%3E%3CSPAN%3E%3B%7D)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EI%20get%20the%20following%20error%3A%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3ETypeError%3A%20external__handlebars_.registerHelper%20is%20not%20a%20function%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EI%20can%20only%20find%20sample%20of%20using%20handlerbars%20where%20they%20haven't%20implemented%20any%20helpers%2C%20can%20anyone%20guide%20me%20on%20what%20to%20do%20to%20be%20able%20to%20add%20helpers%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3EThanks%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-696448%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Framework%20webpart%3A%20add%20Handlerbars%20helper%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-696448%22%20slang%3D%22en-US%22%3EFirst%2C%20did%20you%20install%20Handlebars%20and%20imported%20it%20correctly%3F%20If%20so%2C%20can%20you%20provide%20your%20source%20code%3F%3CBR%20%2F%3EI%20was%20able%20to%20create%20a%20webpart%20using%20Handlebars%20and%20create%20your%20helper%20within%20minutes.%20here%20are%20the%20steps%3A%3CBR%20%2F%3E%3CBR%20%2F%3E1.%20In%20your%20console%2C%20install%20Handlebars%20using%20npm%20i%20handlebars%2C%20for%20example.%3CBR%20%2F%3E2.%20In%20your%20webpart%2C%20reference%20it%20using%20%22import%20*%20as%20Handlebars%20from%20'handlebars'%3B%22%3CBR%20%2F%3E3.%20After%20that%2C%20you%20can%20create%20your%20helper%20just%20as%20you%20would%20using%20javascript%20itself%3CBR%20%2F%3E%3CBR%20%2F%3EIf%20you%20find%20any%20issue%2C%20let%20me%20know.%3C%2FLINGO-BODY%3E
Highlighted
Regular Visitor

I've created a sharepoint framework webpart from the pnp spfx yo template

 

I have want to add a Handlerbars helper so I can have an if statement in my handlerbar template

 

When I add into the render method something like:

 

Handlebars.registerHelper('check', (node)=>{return node!==null;});
 
I get the following error:
TypeError: external__handlebars_.registerHelper is not a function
 
I can only find sample of using handlerbars where they haven't implemented any helpers, can anyone guide me on what to do to be able to add helpers
 
Thanks
 
1 Reply
Highlighted
First, did you install Handlebars and imported it correctly? If so, can you provide your source code?
I was able to create a webpart using Handlebars and create your helper within minutes. here are the steps:

1. In your console, install Handlebars using npm i handlebars, for example.
2. In your webpart, reference it using "import * as Handlebars from 'handlebars';"
3. After that, you can create your helper just as you would using javascript itself

If you find any issue, let me know.