Managing multiple instances with Garfish.setExternal

[tforssander]

Hey everyone,

I stumbled upon a warning in the console while working with Modern.js micro frontends enabled. When exploring the documentation here, it mentions the ability to register additional external dependencies using Garfish.setExternal. By default, Modern.js includes react and react-dom, but I encountered a situation where I needed to add @emotion/react to the mix. The specific warning I encountered is:

You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used (builder-runtime.js)

I tried to resolve this in the modern.config.ts file, but unfortunately couldn't get it work.

Any insights or suggestions would be greatly appreciated!

[kirillbashtenko]

@tforssander you should add it to externals inside MFE modern.config.js

export default defineConfig<'rspack'>({
  tools: {
    rspack: {
      externals: ['react', 'react-dom', '@emotion/react'],
    },
  },
});

and inside the shell app

import React from 'react';
import * as ReactDom from 'react-dom';
import GarfishDefault from 'garfish';
import  * as emotion from '@emotion/react'


GarfishDefault.setExternal({
  react: React,
  'react-dom': ReactDom,
  '@emotion/react': emotion,
});