single-spa-react | Single-spa lifecycles helper for React applications | Single Page Application library

craco's Github readme, states that it is supporting Create React App (CRA) 4.*. By this statement, I'm assuming CRA 5 is not officially supported by craco.

However, this repository utilizes both CRA 5 and craco (but I have not verified that it is working). Use this repository to compare your setup (after verifying that the linked repositry is working), and try different settings/configs to see if you get further.

Sorry for not directly responding to your described error, but I would not use esri-loader with newer versions of ArcGIS for JavaScript API. Why not npm as ES modules which do not require a separate script loader?

Build with ES Module

This way you can do simple imports like this:

import WebMap from "@arcgis/core/WebMap";

Here are the initial setup instructions:

Install instructions

Finally, here is a sample react app from Esri using exactly that:

Esri React App example

The best solutions on this is in your webpack.config.js add this code

This is possible by passing in orgPackagesAsExternal: false to the single-spa webpack config, in your case named singleSpaDefaults. Per the create-single-spa documentation,

This changes whether package names that start with @your-org-name are treated as webpack externals or not. Defaults to true.

You will then need to either:

• Enumerate which packages to mark as external
• Provide a function that does this (which you've noted in your question)

and then merge that with single-spa's config as usual. Because this can become verbose and annoying to do for every microfrontend, consider doing this in a base config that you publish that is specific for your company and which each mfe will then need to consume.

The issue is that previously, the React app also served as the server that provided the index.html file along with other static assets (eg. your localized translation json files). In single-spa, that is no longer the case; that is instead now the root-config. You'll need to update your i18next-http-backend loadPath configuration so that the library tries to retrieve them from the right path which is no longer the root url. Without being familiar with what you want to achieve, you have two options:

• use __webpack_public_path__ to dynamically create the correct URL to point to the assets served by this microfrontend, eg. loadPath: `${__webpack_public_path__} /locales/{{lng}}/{{ns}}.json`,
• if you have a separate i18n service, point the URL to that. This may also require crossDomain and withCredentials depending on how that is also configured.