custom widget with ESM app

Question

Hello All,

I'm trying to create custom accessor-based widgets and use w/ the new ESM support.  I've been unable to incorporate even the sample widget into the ESM (e.g. create-react-app) samples.

Can anyone point me to docs/examples/guidance on doing that?  Just changing the "module":"ES6" in tsconfig and updating the import statements was not enough.

Thanks!

--john

Anonymous User · Answer

Thanks @ReneRubalcava, that example was exactly what I was looking for.  I was missing the directives:

// -nocheck
/** @jsxRuntime classic */
/** @jsx tsx */

Based on your comments though, I wonder if I'm approaching all of this the wrong way.  My original objective was to use the map w/in a create-react-app application but I need a custom JSAPI widget attached to the View.ui.  The use of TypeScript is not mandatory, I was just going that route to facilitate the JSAPI widget creation.

Would you recommend a different approach though?  Perhaps developing the JSAPI widgets in a non-react application and copying the transpiled JS over to the react app?

Thanks to both you and Kelly for the examples and any advice that you can offer!

--john

ReneRubalcava · Answer

Hi, @KellyHutchins pointed me to this thread. If I understand correctly, you're trying to add a custom widgets using the JSAPI into cra typescript template. This isn't an ideal situation because TS only allows a single way to parse JSX in the project. You can ignore the tsconfig from the SDK in this situation because React has different options. You do need to enable decorator support, but that's it.

Here is a sample using cra typescript template with the widget from our custom widget guide.

https://github.com/odoe/cra-jsapi-ts-with-widgets

I wasn't quite sure if that was what you were asking, so my first commit is just cra-ts with the JSAPI, no custom widgets. No need to update the tsconfig in this case.

https://github.com/odoe/cra-jsapi-ts-with-widgets/tree/248b6c3594d46f693a58fe89ce1112768d04e4c3

It should be noted, our TypeScript guide assumes you want to use the CDN, but write your code in TypeScript. That's why we have you set the module type to amd. So the CDN AMD loader can load your compiled code. The guide does not apply to writing custom apps using npm. That's a different developer story and you would follow conventional TypeScript developer guides.

Hope that helps.

khutchins · Answer

Hi John,

It's my first attempt at an ESM project so I'm still working through the settings and not sure I'd recommend them. I'll ask around and see if I can get some info on the recommended settings.