Issue when running application from MFE's shell : Could not find "client" in the context or passed in as an option

Help
1

I am new to GraphQL and React.

My project is based on MFE where we have multiple MFE that will hooked to shell ultimately. I am tryying to access graphql endpoint from one of the MFE application ( Say it Product ) . If I execute my MFE project without shell ( Product ) things are working fine. I added <ApolloProvider client={client}> in my product MFE.

However when I am trying to hook my MFE with module-federation to shell . it’s throwing above error. appricate if any one can help me here

In Product react app

root.render(
  <StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </StrictMode>
);

In Shell

1 const ProductUI = React.lazy(() => import('product/Module'));

2 <ProductUI />

2

Is there a chance that your MFE is using multiple different instances of the react module? A ApolloProvider is only ever valid for one react version, so if these are imported from different parts of node_module, this might happen.

You can see this with (depending on your package manager) yarn why react or npm why react

3

Thank you for your reply.

I was able to find the reason and it was silly one. sorry for it

Basically I added ApolloProvider code in Bootstrap and later I realize that when we inject MFE to shell it bypass bootstrap and load <app> into shell. so technically shell doesn’t have information about ApolloProvider … Have pity on me :slightly_frowning_face:

4

I’m glad you solved it!