custom widget examples not working?

896
6
12-26-2020 09:55 AM
by Anonymous User
Not applicable

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

 

 

 

6 Replies
AnneFitz
Esri Contributor

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

0 Kudos
by Anonymous User
Not applicable

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

 

--john

0 Kudos
AnneFitz
Esri Contributor

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

0 Kudos
by Anonymous User
Not applicable

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

0 Kudos
AnneFitz
Esri Contributor

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

0 Kudos
by Anonymous User
Not applicable

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

 

0 Kudos