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; } } }

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:

Vind meer berichten getagd met

Accepted answers

AndyGup

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?

All comments

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.

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!

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.

AndyGup

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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