nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Resolving imports for widget .tsx files

FrederickPowers

Greetings,

Is it possible to edit and compile the .tsx files provided by ESRI as a way of making custom widgets eg https://github.com/Esri/arcgis-js-api/blob/4master/widgets/Sketch.tsx.

I followed the tutorials, but instead of a new .tsx file I started with the one linked above. I was able to add a custom <div> section and some custom functionality, and although the code compiled with errors, it ran fine in the browser.

The compile errors had to do with not being able to resolve imports, for example it can't find the following import :

import { eventKey } from "esri/core/events";

Some of the imports would resolve if they changed slightly like:

import Graphic from "esri/widgets/../Graphic"; ->

import Graphic from "esri/Graphic";

Others I can't find at all like VNode or eventKey even after doing npm install @arcgis/core, which I don't even know if that is correct or needed.

Is it possible to start with the .tsx file of the widget from ESRI, and if so how to resolve the imports that don't seem to be present or require altering the import paths?

Thanks

Find more posts tagged with

Accepted answers

AndyGup

That approach won't work in the future. The underlying architecture for out-of-the-box widgets is going to change, the specifics are still being worked out. We currently only recommend extending Widget and BaseLayers.

All comments

AndyGup

Hi @FrederickPowers going forward all the widget view-based .tsx files will be marked deprecated, we are in the process of doing that for the upcoming 4.21 release (tentatively late September). The missing imports are just one of several reasons why we don't recommend that pattern anymore.

Note, you will still be able to build custom widgets, here's the documentation for that: https://developers.arcgis.com/javascript/latest/custom-widget/. The current doc uses the AMD pattern, we are also in the process of updating them for ES modules, and there will be a new sample using that pattern.

FrederickPowers

Thank you for the explanation.

I just followed the link for custom widget creation, but instead of subclassing Widget, I subclassed BasemapGallery and overrode the render() method by copying the render() method from the BasemapGallery .tsx to add a header div and a custom button, just as proof of concept. After adding the necessary properties and private methods, the new .tsx didn't have any import issues and compiled without error.

After the 4.21 release and deprecation of the view based .tsx files, will there be a way to do what I described above: which is to start with an existing widget, subclass it and override things like its render method, or will the code for the out of the box widgets not be available in the same way?

AndyGup

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.