Stencil Web Component with ES Modules

[Justin_Greco]

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:

[AndyGup · Accepted solution]

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?

[Justin_Greco]

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.

[Justin_Greco]

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!

[AndyGup]

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.