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-webpack-module/m-p/1129100", 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.

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.