topic Re: Stencil Web Component with ES Modules in ArcGIS JavaScript Maps SDK Questions

Stencil Web Component with ES Modules

Justin_Greco — Thu, 08 Dec 2022 14:37:16 GMT

We have web components that we embed on our website that I built with Stencil. I am trying to move this from esri-loader to @ArcGIS/core, which is working, except there is an issue when the popup appears.

Here is a Codepen loading the web component:

https://codepen.io/justingreco/pen/dyKrVvv

Here is the repo on GitHub:

https://github.com/CORaleigh/raleigh-map-components

I get the following errors in the console when the popup appears:

So I thought it was an issue with the build process, but I am seeing the same issue locally and get the following errors about not being able to lazy load calcite-icon, calcite-flow, and calcite-flow-item:

Re: Stencil Web Component with ES Modules

AndyGup — Thu, 08 Dec 2022 16:23:53 GMT

Hi @Justin_Greco we aren't able to access your repo, it might be set to private. You might need to use setAssetPath for Calcite as mentioned here: https://developers.arcgis.com/calcite-design-system/get-started/#custom-elements?. If you give that a try, let us know if it helps?

Re: Stencil Web Component with ES Modules

Justin_Greco — Thu, 08 Dec 2022 16:28:30 GMT

Hi Andy, its should be public now. I don't think I had mentioned, but I am not using Calcite Design System in these components, just the JavaScript API. I can try importing and loading to see if it helps at all.

Re: Stencil Web Component with ES Modules

Justin_Greco — Thu, 08 Dec 2022 16:56:38 GMT

Just imported @esri/calcite-components and set the asset path and that resolved the issue. As a test, I just uninstalled it and rolled back to 4.24 and am not seeing the issue. Since the errors were referring to calcite-flow, I'm wondering if this is related to the addition of the related records at 4.25 since it looks like that functionality uses the flow component.

Update: Just created a new React app, installed just @ArcGIS/core 4.25, without calcite-components and loaded the web map and don't see the issue, so it must be related to Stencil then. Since installing calcite-components worked, I'll just keep that in there. Thanks!

Re: Stencil Web Component with ES Modules

AndyGup — Thu, 08 Dec 2022 17:21:06 GMT

All good info, thanks for sharing your experience. Yes, there is a known issue with Stencil because it has it's own assetsPath setting that conflicts with @ArcGIS/core.