How to architect a micro-frontends project under ArcGIS JS API?

[DaoYu]

Hello, I'm trying to architect a microfrontend project under ArcGIS JSAPI.

However, I've encountered a critical issue where different remote applications using the ArcGIS JS API result in an error,such as „Logger.js:5 [esri.core.Accessor] Accessor#set Assigning an instance of 'esri.geometry.SpatialReference' which is not a subclass of 'esri.geometry.SpatialReference“

I've read similar issues such as "https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/problem-using-es-modules-in-webpa...", but there doesn't seem to be an out-of-the-box solution provided. I was wondering if there were any progress or shared knowledge from the internal team regarding microfrontends?

---

I can probably guess the reason for this error. I instantiated the Access class of the API in different micro-frontends that are not aware of each other, which has to do with the prototype chain. However, I'm not sure how to handle this issue.

[ReneRubalcava]

This is going to depend on how you are using the SDK. You can't mix builds different builds.

Are these different components? Like you have some pieces for displaying legend, layerlist on one port, something to handle the map on another port? One solution is to have your components take ArcGIS Modules as inputs, so your "main" application supplies the ArcGIS SDK modules and your components instantiate them. That would help to solve this issue. There is not really a clean story here.

[DaoYu]

Thank you very much for your reply. I am using the SDK with ESM. Following your advice, I modified my code structure like this:

mfe-arcgis-api
├── package.json
├── readme.md
├── api (arcgis js api)
│   ├── src
│   ├── package.json
│   ├── webpack.config.js
│   └── ...
├── host
│   ├── src
│   ├── package.json
│   ├── webpack.config.js
│   └── ...
└── remote 
    ├── src
    ├── package.json
    ├── webpack.config.js
    └── ...

My host's webpack5 config:

new ModuleFederationPlugin({
      name: "host",
      filename: "remoteEntry.js",
      remotes: {
        api: "api@http://localhost:8000/remoteEntry.js",
        remote: "remote@http://localhost:3000/remoteEntry.js",
      },
      //  ...
}

usage:

import ArcGISMap from "api/Map"; // which from my api application
import MapView from "api/views/MapView";

Both the host and remote get the SDK from the "api", ensuring that Accessor is the same class. Now this simple demo is sufficient for my needs. However, I still hope that the official documentation can provide more elegant examples, similar to those in [Esri/jsapi-resources](https://github.com/Esri/jsapi-resources). Thank you again for your response, which has pointed me in the right direction.