custom widget with ESM app

[Anonymous User]

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

[KellyHutchins]

John,

Not sure if this will help since it's not a react sample but here's my draft of an app that uses TypeScript, ES Modules and web pack. I added the custom widget sample from the help to test out creating a custom widget. 

https://github.com/kellyhutchins/arcgis-core-demo-app

[Anonymous User]

Thanks for the example Kelly, that's useful.  I haven't yet been able to reconcile it with an app scaffolded by "create-react-app --template typescript" but am still working on it.

In the meantime, I noticed an number of difference in your tsconfig.json and the values described in the JSAPI docs for an AMD-style environment:

{
  "compilerOptions": {
    "module": "amd",
    "lib": ["ES2019", "DOM"],
    "noImplicitAny": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "jsx": "react",
    "jsxFactory": "tsx",
    "target": "ES2019",
    "experimentalDecorators": true,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true,
    "importHelpers": true,
    "moduleResolution": "node"
  },
  "include": ["./app/*"],
  "exclude": ["node_modules"]
}

I understand that the project option for "module" needs to change, but what about the others?  Are the settings that you're using what you would recommend instead for an ESM project?

Thanks again for your help!

--john

[KellyHutchins]

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. 

[ReneRubalcava]

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.

[Anonymous User]

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