composition provider context works locally but not after being exported

[benjgil]

Question:
I have added a provider via my env so that all my compositions receive a specific context (in my case a theme provider), and it works great in my local dev server, but whenever i export my components suddenly the context isn't working. What's happening and how can I get it working?

Answer:
This is because of how context works when you’re dealing with component compositions with bit.

tl;dr - you need to add a dependencies override to the main.runtime file, so that your component knows to use the same version of the context component as the env is providing when building the component compositions.
See here for an example, from line 59 (see also lines 25 and 32 to remove the theme-provider from the non-peer dependencies). You would do the same for your context/provider component, which would ensure that the context it exports will always connect up between provider and consumer in the compositions.

More Detail:
When you insert your context in the bit environment, you need the component to connect with that specific instance (much like it would with the specific instance injected in an app).
When the component is consumed in an app, its version of the context component is the same instance as the rest of the app (there’s only one node_module package of your context component in the app itself), so everything works out of the box (as it would if you tried using your components, as-is, in a real application with the context provided at the app level).

But with bit compositions it’s more complicated as you dont really have a consuming app - standing in for the app is the bit environment, which builds your component and wraps the providers you added in the preview.runtime around your compositions.

But the env itself is a component, with its own dependencies (now including your context component as you’ve added the context in your preview.runtime file) and your other component being built by the env is a separate component, with its own dependency on the context component. If we dont add something to tell them to both use the same version of the context, the provider and consumer wont be talking to the same instance of the context component and so it wont work.

The solution is to ensure that you set the resolveFromEnv flag (bit-specific, that doesnt exist outside bit), which tells your component’s compositions to use the env’s version of the package, not it’s own.