Errors using ArcGIS API for JavaScript within Web Component - instanceof broken

JoshGore

I'm trying to create a custom web component that adds a graphics layer to a map passed in as a prop, and interacts with the layer/map using a sketchViewModel. 

Adding the graphics layer directly fails (though I can add using addMany), as does some other JS API functionality that interacts with the passed in map. I think this is partly due to an instanceof check run when adding the layer - as there's the version of the JS API loaded outside the web component as well as the version of the JS API loaded in the web component (using ES Modules) checking whether the graphics layer is an instance of layer returns false. But I could be wrong on this.

Any recommendations for using JavaScript API functionality both within a web component and outside of it? I'd like to use the component both within Experience Builder & as part of general web pages.

Hopefully just missing something obvious!

:formatted:3985 [esri.support.LayersMixin] #add() The item being added is not a Layer or a Promise that resolves to a Layer.
q._consoleWriter	@	:formatted:3985
q._log	@	:formatted:3965
q.error	@	:formatted:3909
y.add	@	:formatted:18517
e$7	@	localmaps-draw-measure-2e432eca.js:377
create	@	localmaps-draw-measure-2e432eca.js:593
await in create (async)		
(anonymous)	@	localmaps-draw-measure-2e432eca.js:910
(anonymous)	@	symbols-4dde07be.js:398
emit	@	symbols-4dde07be.js:398
emit	@	symbols-4dde07be.js:398
i	@	localmaps-draw-measure-2e432eca.js:593
(anonymous)	@	symbols-4dde07be.js:398
emit	@	symbols-4dde07be.js:398
emit	@	symbols-4dde07be.js:398
complete	@	localmaps-draw-measure-2e432eca.js:587
(anonymous)	@	localmaps-draw-measure-2e432eca.js:593
(anonymous)	@	symbols-4dde07be.js:398
emit	@	symbols-4dde07be.js:398
emit	@	symbols-4dde07be.js:398
onComplete	@	drawSurfaces-35e63236.js:71
(anonymous)	@	drawSurfaces-35e63236.js:71
(anonymous)	@	symbols-4dde07be.js:398
emit	@	symbols-4dde07be.js:398
emit	@	symbols-4dde07be.js:398
complete	@	drawSurfaces-35e63236.js:293
_onImmediateDoubleClick	@	drawSurfaces-35e63236.js:293
(anonymous)	@	drawSurfaces-35e63236.js:293
(anonymous)	@	symbols-4dde07be.js:398
emit	@	symbols-4dde07be.js:398
emit	@	symbols-4dde07be.js:398
m.handleInputEvent	@	:formatted:60283
C._handleInputEvent	@	:formatted:57809
(anonymous)	@	:formatted:57735
(anonymous)	@	:formatted:59638
k._handleEvent	@	:formatted:59398
(anonymous)	@	:formatted:59316
z._continuePropagation	@	:formatted:58978
z._doNewPropagation	@	:formatted:58964
z._emitInputEvent	@	:formatted:58953
z._emitInputEventFromSource	@	:formatted:58944
z._onEventReceived	@	:formatted:58886
h._handlePointerPreventDefault	@	MapView.js:887

 

 

RRubalcava

I assume your web component is a separate build from your main app? In that case, the ArcGIS modules don't share the same prototype chain and that's why you see that error. The recommended workflow for something like this is to expose methods or props on your component that can take JSON strings to add graphics or similar and provide events you can listen for. But you can't mix like that. There was another post here I believe where this was covered, but that's the gist of it.

 

Found the last conversation about it with a bit more info

https://community.esri.com/t5/arcgis-api-for-javascript-questions/problem-using-es-modules-in-webpack-module/m-p/1129450/highlight/true#M75733