Using local dependencies while downloading remotes from CDN

[rickihastings]

Hi,

We have a Module Federation solution which is setup in a way where there is a shell / container app, and then multiple apps which are embedded into the shell.

Each app is bundled and deployed to a CDN.

For local development we have it configured so that you only need to build the app you are working on and the rest are downloaded from the CDN.

This for the most part works really nicely, however I can't seem to understand how we can force the shared dependencies to be loaded from disk rather than from remote when working in a local development mode (if possible when versions match.)

This is how our module federation is setup, the individual apps consume some resources from the container, in production they are loaded and embedded into the container when you navigate to a specific route for the apps, then during local development they render the container (which loads and renders the production version of container and the development version of the app inside.)

             +-----------+         
             | Container |         
             +-----|--\--+         
             -/    |   -\          
           -/      |     -\        
         -/       /        \       
       -/         |         -\     
 +----/--+   +----|---+  +--------+
 | App 1 |   | App 2  |  |  App 3 |
 +-------+   +--------+  +--------+
                                   

However the issue here is that the shared dependencies (react, react-dom, redux, etc) are being provided by the container (or sometimes even a completely different federated module which I'm struggling to understand why - especially when I am not navigated to that route) in local development. Which means we are not getting the best experience in React DevTools, but also seeing weird React errors.

TypeError: can't access property "setExtraStackFrame", ReactDebugCurrentFrame$1 is undefined

How can I force the shared dependencies to be fetched from disk during local development builds? The only thing that should be coming from the remotes are the remote code and any dependencies that the remote supplies.

Our plugin config looks something like this:

  new ModuleFederationPlugin({
      name: 'app1',
      remotes: {
        container: 'CDN-URL',
      },
      exposes: {
        './app': './src/entrypoint',
      },
      filename: 'remoteEntry.js',
      shared: {
        react: { requiredVersion: deps.react, singleton: true },
        'react-dom': { requiredVersion: deps['react-dom'], singleton: true },
        '@apollo/react-hooks': { requiredVersion: deps['@apollo/react-hooks'] },
        // etc..
      }
    })

[ScriptedAlchemy]

Yes it possible but would need to know more and see a codebase. Book session on Calendly