custom widget examples not working?

[Anonymous User]

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

[AnneFitz]

Hi John! Thanks for pointing this out. We are investigating why the tutorial is not working as expected. I will update you when we have more information!

- Anne

[Anonymous User]

Thanks Anne, I look forward to hearing what you all come up with.

--john

[AnneFitz]

Hi John,

There are a few changes you'll need to make in order for this to work.

1. Add the following to compilerOptions in your tsconfig.json file

 "lib": ["ES2019", "DOM"]

 2. In your require statement in the index.html file, use this syntax to reference the custom widget:

require(["app/HelloWorld"], 
  function({default: HelloWorld}) { } 

By following the rest of the tutorial but making these small changes, I was able to get these samples to work. Let me know if you still run into any issues! We are working on updating the documentation to reflect these changes.

Thanks,

Anne

[Anonymous User]

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. 

[AnneFitz]

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

[Anonymous User]

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