topic Re: custom widget examples not working? in ArcGIS JavaScript Maps SDK Questions

custom widget examples not working?

Anonymous User — Sat, 26 Dec 2020 17:55:46 GMT

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

Re: custom widget examples not working?

AnneFitz — Wed, 30 Dec 2020 19:31:18 GMT

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

Re: custom widget examples not working?

Anonymous User — Sun, 03 Jan 2021 18:05:06 GMT

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

--john

Re: custom widget examples not working?

AnneFitz — Mon, 04 Jan 2021 18:38:08 GMT

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

Re: custom widget examples not working?

Anonymous User — Sun, 10 Jan 2021 20:57:18 GMT

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.

Re: custom widget examples not working?

AnneFitz — Mon, 11 Jan 2021 17:27:24 GMT

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

Re: custom widget examples not working?

Anonymous User — Mon, 11 Jan 2021 21:37:51 GMT

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