Problem using ES modules in webpack module federation remote entry

Question

I am having serious trouble running angular application that uses webpack module federation remote entries with esri JS api ES modules.

The idea is that there is a shell application that consumes remote entries, shared library that provides some business logic and is used by multiple components, and finally there is plugins application that provides some remote entries (plugins) for shell. In shared library there is service for creating a map view. In plugins application there is map-component (plugin) that provides UI components for created map view (home, scale, locate).

When I run the plugins application on its own everything works as expected (home, scale, locate).

But when I consume map-component from remote entry in shell app, nothing works at all (scale is frozen, locate zooms to other place and home does nothing) and console is filled with errors like this one:

„Logger.js:5 [esri.core.Accessor] Accessor#set Assigning an instance of 'esri.geometry.SpatialReference' which is not a subclass of 'esri.geometry.SpatialReference“

The extent created after clicking on home button seems all right exanimating it in debugger, but when used in mapView.goTo, it does nothing.

The app is using esri JS api via ES modules from npm package @arcgis/core.

Fully reproducible example with readme.me to reproduce issues can be found here:

https://github.com/bigend/esri-webpack-module-federation-issue

If anyone could just shed some light on this, or at least explain to me what that error is supposed to mean, I would be really very grateful.

Anonymous User · Answer

Hi there,

I am getting the same issues as this while working with federated modules and React. Any idea when this might be easily resolved out of the box?

My set up is:

* main app that has components such as a custom sketch tool* custom sketch tool sets up a SketchViewModel and GraphicsLayer on mount and handles event listeners and so on. On complete or update of a sketch, an onComplete or onUpdate prop can be called, if passed into the React component.

* plugin app that can render the custom sketch tool, and pass it props such as onComplete, onUpdate, various other settings

I get a lot of errors similar to the above, even though the plugin app never directly affects the sketch tool or the map, but I'm assuming it's because the custom sketch component is being rendered in a separate app and this a separate origin?

Is there any way on setting up a MapView we can specify accepted origins or something that might get this working more easily?

Thanks in advance.

RRubalcava · Answer

I know it can seem a little odd. There are checks in Accessor for when properties are set where we do something like this; target instanceof Clazz. When the origin of the modules is different, this is false and fails. It's part of the internal API.

One solution would be to treat shared libs from the shell like workers. You can't pass class instances to workers, only data objects, like objects, arrays, buffers, etc. So you could use some of the toJSON() and fromJSON() methods of classes to pass data back and forth. But, I'll try to keep a mental note for this thread as we do more research in federated modules. Thanks!

matuskajba · Answer

Thank you very much for clarification.

I have to admit, that I don't quite understand why the same origin is so important. I can imagine that the same version or build is important for objects compatibility, but I can't see an importance of the place from where the classes are loaded. But surely, I don't know what is behind the scenes, so it's not up to me to judge it.

Finally, I would like to suggest, that it may be a good idea to share this limitation in the API documentation. The module federation seems like hot topic these days, and I think it's very likely that other developers may stumble upon this and a note in documentation can spare them from some desperation. And of course it will be very interesting to read somewhere about your internal testing in this area.

One more time, thank you very much for you insight, I am really appreciating it.