custom widget examples not working?

Question

Hello All,

I was following the examples for creating a custom widget here and here including the Typescript setup instructions.  When I try to load the widget however, I get the error:

Uncaught TypeError: HelloWorld is not a constructor

In comparing to the source for one of the View Live demos, I notice the JavaScript looks different than my compiled version.  I'm assuming that this has to do with the version of TypeScript used or the target property in tsconfig.json but my experiments with different versions of TypeScript and target versions have been unsuccessful.

Can someone please help me with getting the examples in the User Guide to work?

Thanks!

--john

Anonymous User · Answer

Thanks, that does seem to fix it.  Should that be the standard target in the tsconfig.json and the docs adjusted accordingly?

My eventual objective is to be able to write custom accessor-based widgets and to use w/ the new ESM support but I've been unable to incorporate this sample widget into the ESM (e.g. create-react-app) samples.  Do you have any docs/examples/guidance on doing that?  Just changing the "module":"ES6" in tsconfig and updating the import statements was not enough.

Thanks again for your help!

--john

AnneFitz · Answer

Hi @Anonymous User - sorry about the confusion. Try setting your target to "es5" in the tsconfig instead of "es2019".

Anonymous User · Answer

Thanks Anne.  I must still be missing something because, I'm getting this error:

(index):120 Uncaught TypeError: Class constructor HelloWorld cannot be invoked without 'new'
at new g ((index):120)
at (index):50
at Sa ((index):47)
at (index):48
at Ka ((index):47)
at sa ((index):48)
at qa ((index):50)
at HTMLScriptElement.<anonymous> ((index):52)

I've got my source in Github but did notice that the generated JS shown in the tutorial doesn't match what I'm getting out of tsc so perhaps there's still a mismatch in the tsconfig.json.