Module Federation with NX Unsatisfied Version React Icons

Question

I'm having an issue with Module Federation in my project.

I have the following module-federation.config.js in my shell app:

/**
 * @type {import('@nrwl/devkit').ModuleFederationConfig}
 **/
const moduleFederationConfig = {
  name: 'shell',
  remotes: ['app-1', 'app-2'],
  shared: (name, config) => {
    // We want react-icons to be tree shaken, and bundled into each host/remote separately.
    if (name === 'react-icons') {
      return false;
    }
    return undefined;
  },
};

module.exports = moduleFederationConfig;

Now app-1 uses react-icons and app-2 does not. If I run app-2 standalone it works with no problems and if I run my shell app and render app-1 inside that it also works fine.

However, when I try to run app-1 standalone, it throws the following error:

Unsatisfied version 0 from monolith-deployment of shared singleton module react-icons (required ^4.4.0)

I'm sure I'm missing something basic, but I'm just to new at module-federation to figure it out.

Here's a warning I get, but I'm not sure what to do with it:

WARNING in shared module react-icons -> /workspaces/my-repo/node_modules/react-icons/lib/esm/index.js No version specified and unable to automatically determine one. No version in description file (usually package.json). Add version to description file /workspaces/my-repo/node_modules/react-icons/lib/package.json, or manually specify version in shared config.

Answer 1

The issue is that the version of nx used at the time this was posted had a bug in it that lasted from v15.8.6 all the way through to v15.9.2.

v15.9.3 fixes it.

Solution

Update nx to the latest version, or at least avoid using versions 15.8.6-15.9.2