Module federation and React Context hooks

Question

When using React useContext hooks, it currently requires an import from a component higher up in the tree to pass in the Context object. Say for example:

// index.jsx
export const MyContext = React.useContext('1')

export function MyApp(props){
  return (
    <MyContext.Provider value='1'>
        <ChildComponent />
    </MyContext.Provider>
  )
}

// ChildComponent.jsx
import {MyContext} from './index';

export function ChildComponent(props){
  const context = useContext(MyContext);
  return (<p> {context} </p>)
}

But if the child component is federated, it will be in a separate repo on its own, and cannot import from './index'.

At the MyApp level, I can import the ChildComponent with:

const ChildComponent= React.lazy(() => import('federatedApp/ChildComponent'))

provided that within the Webpack config, the federatedApp is named as a remote, and the HTML doc includes the remote modules entry point .js. But how might I give MyContext to the remote federatedApp?

Guess answer: Would I need to separate the two components in index.jsx into two files and expose them both separately?

Module federation and React Context hooks

0 Answers0